Download as PDF, PPTX
![/etc/httpd/conf.d/deflate.conf <IfModule mod_deflate.c>! ! SetOutputFilter DEFLATE! ! AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript! ! DeflateCompressionLevel 9! ! BrowserMatch ^Mozilla/4 gzip-only-text/html! BrowserMatch ^Mozilla/4.0[678] no-gzip! BrowserMatch bMSIE !no-gzip !gzip-only-text/html! ! DeflateFilterNote Input instream! DeflateFilterNote Output outstream! DeflateFilterNote Ratio ratio! LogFormat '%r %{outstream}n/%{instream}n (%{ratio}n%%)' deflate! </IfModule>](https://image.slidesharecdn.com/themodernjavawebdeveloperbootcamp-131126142200-phpapp01/75/The-Modern-Java-Web-Developer-Bootcamp-Devoxx-2013-92-2048.jpg)
![Mobile Devices - Disable Focus Zoom (function(doc) { ! var addEvent = 'addEventListener', ! type = 'gesturestart', ! qsa = 'querySelectorAll', ! scales = [1, 1], ! meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : []; ! ! function fix() { ! meta.content = 'width=device-width,minimum-scale=' + ! scales[0] + ',maximum-scale=' + scales[1]; ! doc.removeEventListener(type, fix, true); ! } ! ! if ((meta = meta[meta.length - 1]) && addEvent in doc) { ! fix(); ! scales = [.25, 1.6]; ! doc[addEvent](type, fix, true); ! } ! }(document));](https://image.slidesharecdn.com/themodernjavawebdeveloperbootcamp-131126142200-phpapp01/75/The-Modern-Java-Web-Developer-Bootcamp-Devoxx-2013-103-2048.jpg)
Uploaded byMatt Raible
The Modern Java Web Developer Bootcamp - Devoxx 2013
The document is a comprehensive guide for modern Java web developers, covering topics such as Java 7 and 8 features, programming languages like Scala and Groovy, and the importance of performance optimization in web applications. It emphasizes the use of modern tools and frameworks, such as Intellij IDEA, HTML5, and responsive design principles to create high-performance websites. Additionally, it discusses evolving web standards, API documentation, and techniques for improving application speed and user experience.
The Modern Java Web Developer Bootcamp - Devoxx 2013
- 1. The Modern JavaWeb Developer Bootcamp Matt Raible • http://raibledesigns.com Photos by The Amazing Trish McGinity
- 2. Who is MattRaible? Founder of AppFuse Father, Skier, Cyclist Web Framework Connoisseur Bus Lover Blogger on raibledesigns.com
- 3. How about You? Haveyou developed a Struts 1 application? Used PHP? Have you every written CSS from scratch? Why do you hate JavaScript? What’s your favorite JavaScript framework? What do you want to learn from this talk? #DV13 @mraible
- 4. Topic Inspiration Inspired byBen Evan’s and Martijn Verburg’s The Well-Grounded Java Developer Developing with Java 7 Vital techniques Polyglot programming on the JVM Crafting the polyglot project #DV13 @mraible
- 5.
- 6. The Modern JavaWeb Developer JVM #DV13 @mraible
- 7. The Modern JVMWeb Developer Starts with Fast Hardware Uses IntelliJ IDEA Leverages HTML5, JavaScript, and CSS3 Creates High Performance Web Sites For Mobile Devices, in the Cloud And cares about Security #DV13 @mraible
- 8.
- 9.
- 10. Supports Emmet (akaZen Coding) div#page>div.logo+ul#navigation>li*5>a <div id=page> ! <div class=logo></div> ! <ul id=navigation> ! <li><a href=></a></li> <li><a href=></a></li> <li><a href=></a></li> <li><a href=></a></li> <li><a href=></a></li> </ul> ! </div> #DV13 ! ! ! ! ! @mraible
- 11. Java 7 and8 Strings in switch statements Diamond Syntax Try with resources Improved exception handling with multi-catch NIO.2: Path, Files and Asynchronous I/O Path path = FileSystems.getDefault().getPath(logs, access.log); ! BufferReader reader = Files.newBufferedReader(path, StandardCharsets.UTF_8); #DV13 @mraible
- 12. Java 7 and8 Parallel Collections JSR 310 Date and Time API Functional Interfaces with default method Lambda Expressions (a.k.a. Closures) ! // sort a list by lastName ! List<Person> persons = ...; ! persons.sort((p1, p2) -> ! p1.getLastName().compareTo(p2.getLastName())); Nashorn JavaScript Engine #DV13 @mraible
- 13.
- 14. The Modern JVMWeb Developer is aware of... %s/Hibernate/Spring Data Servlet 3 @WebServlet, @WebFilter, @WebListener Asynchronous Servlets WebApplicationInitializer (to eliminate web.xml) REST and Functional Programming #DV13 @mraible
- 15. Reactive Applications “Users expectmillisecond response times and 100% uptime. Data needs are expanding into the petabytes.” The Reactive Manifesto #DV13 @mraible
- 16. Key Building Blocks ObservableModels Event Streams Stateful Clients #DV13 @mraible
- 17.
- 18. Scala Venkat Subramaniam “Scala islike the dragon in Avatar. It will try to kill you, but if you master it, you can fly great distances with it and have a wonderful time.” #DV13 @mraible
- 19. Scala Basics def startsa method variables are started with var or val variables are defined with name:type semicolons are not required
- 20. Scala vs. Java publicclass Car { ! private final int year; ! private int miles; ! ! public int getYear() { return year; } ! public int getMiles() { return miles; } ! public void setMiles(int theMiles) { miles = theMiles; } ! ! public Car(int theYear, int theMiles) { ! year = theYear; ! miles = theMiles; ! } ! } #dv13javaweb$ #DV13 @mraible
- 21. Scala vs. Java classCar(val year: Int, var miles: Int) #dv13javaweb$ #DV13 @mraible
- 22.
- 23. Groovy is stillhot... #dv13javaweb$ #DV13 @mraible
- 24. But sliding toScala #dv13javaweb$ #DV13 @mraible
- 25. Or not? * November12, 2013 12:00 #dv13javaweb$ #DV13 @mraible
- 26. Groovy and Scalaat Devoxx Sessions 3 3 2.25 2 1.5 0.75 0 #DV13 Scala Groovy @mraible
- 27. Learning Scala Scala forthe Impatient - Cay Horstmann Programming in Scala, 2nd Edition - Martin Odersky, Lex Spoon, and Bill Venners Functional Programming Principles in Scala September 16th 2013 (7 weeks long) Signup at https://www.coursera.org/course/progfun #DV13 @mraible
- 28. The Java Language “Javaremains – in spite of the fragmented programming language landscape – a viable, growing language.” http://redmonk.com/sogrady/2012/02/08/language-rankings-2-2012/ #dv13javaweb$ #DV13 @mraible
- 29. and ... it’sstill the most popular! #dv13javaweb$ #DV13 @mraible
- 30.
- 31.
- 32.
- 33.
- 34. Jobs on dice.com JVMAPI Frameworks, November 2013 600 564 450 300 150 0 #dv13javaweb$ #DV13 172 30 Grails 84 Play JAX-RS Spring MVC @mraible
- 35. Skills JVM API Frameworks,November 2013 20,000 19228 18128 15,000 10,000 5,000 0 #dv13javaweb$ #DV13 5784 Grails Play 4132 JAX-RS Spring MVC @mraible
- 36.
- 37.
- 38. Job Trends withSpring MVC Absolute #dv13javaweb$ #DV13 Relative @mraible
- 39. Mailing List Traffic October2013 1125 Grails 1218 Play 222 Dropwizard 0 #dv13javaweb$ #DV13 325 650 975 1300 @mraible
- 40. Tagged Questions (November10, 2013) 14,000 10,500 7,000 3,500 0 #dv13javaweb$ #DV13 Grails Play JAX-RS Jersey Dropwizard @mraible
- 41. But if wantto remain a Web Developer... #DV13 @mraible
- 42.
- 43. HTTP Overview Request /Response Protocol Features: Keep-Alive HTTP Secure Binary Compression #DV13 @mraible
- 44. HTTP Methods 1.0 definedGET, POST and HEAD 1.1 defined added OPTIONS, PUT, DELETE, TRACE and CONNECT Safe methods: HEAD, GET, OPTIONS and TRACE Idempotent: PUT and DELETE Insecure: TRACE, TRACK and DEBUG #DV13 @mraible
- 45. SPDY and HTTP2.0 Allows client and server to compress request and response headers Allows multiple, simultaneously multiplexed requests over a single connection Allows the server to actively push resources to the client that it knows the client will need The initial draft of HTTP 2.0 is based on a straight copy of SPDY #DV13 @mraible
- 48. Browser Tools Firebug forFireFox Chrome Developer Tools Elements & Console Settings PageSpeed Insights http://www.igvita.com/slides/2012/devtools-tips-and-tricks #DV13 @mraible
- 49.
- 50. How do youwrite HTML5? <!DOCTYPE html> <article> <aside> <section> <header> <footer> <nav> <audio> <canvas> <video> <datalist> <details> <applet> <center> <font> <frame> <frameset> https://developer.mozilla.org/en-US/docs/HTML/HTML5 #DV13 @mraible
- 51. HTML5 Forms <form> ! <inputtype=text placeholder=Enter your search terms> ! <input type=submit value=Search> ! </form>! <form> ! <input type=text autofocus> ! <input type=submit value=Search> ! </form>! <form> ! <input type=text required> ! <input type=submit value=Search> ! </form>! http://diveintohtml5.info/forms.html
- 52. HTML5 Forms <form> ! <inputtype=email> ! <input type=submit value=Go> ! </form> #DV13 @mraible
- 53.
- 54.
- 55. HTML5 Storage Web StorageAPIs: localStorage / sessionStorage Web SQL Database IndexedDB Application Cache File* APIs #DV13 @mraible
- 56. window.localStorage Simple key /value store Persistent through page reloads Great for storing user preferences Avoids HTTP overhead of cookies <script> localStorage.setItem('key', value); localStorage.getItem('key'); </script> #DV13 @mraible
- 57. window.sessionStorage Same as localStorage Lastsfor browser session New window / tab starts new session Great for sensitive data (e.g. banking) Excellent use case: auto-save <textarea> #DV13 @mraible
- 58. Other Storage APIs WebSQL Database IndexedDB Not supported by IE9, iOS or Safari Application Cache File APIs #DV13 @mraible
- 59.
- 60. CSS3 Secrets Animated Transitions RoundedCorners Drop Shadows Gradient Colors transform: rotateY(180deg); border-radius: 8px 8px 0 0; box-shadow: 2px 2px 4px 4px; Styling based on sibling count More cursors for better usability Custom Checkboxes and Radio Buttons #DV13 http://lea.verou.me/css3-secrets @mraible
- 61. CSS3 Media Queries /*Smartphones (portrait and landscape) ----------- */ ! @media only screen and (min-device-width: 320px) ! and (max-device-width: 854px) { ! body { ! padding: 10px; ! } ! ! textarea { ! width: 90%; ! } ! } ! ! /* iPad (portrait and landscape) ----------- */ ! @media only screen and (min-device-width: 768px) ! and (max-device-width: 1024px) { ! body { ! padding-top: 50px; ! } ! }
- 62.
- 63. JavaScript The Good Parts Lambda DynamicObjects Loose Typing Object Literals #DV13 @mraible
- 64.
- 65. JavaScript Programming Patterns TheOld-School Way Singleton Module Pattern Revealing Module Pattern Custom Objects Lazy Function Definition http://www.klauskomenda.com/code/javascript-programming-patterns/ #DV13 @mraible
- 66.
- 67.
- 68.
- 69. jQuery CDN athttp://code.jquery.com $(document).ready $(document).on(‘click’, ‘#selector’, function() {}) jQuery UI for Dialogs, Sliders, Calendars $.ajax and $(‘#div’).load(url) #DV13 @mraible
- 70.
- 71. AngularJS A JavaScript MVWFramework From Google, MIT Licensed Data-binding, Controllers, Dependency Injection Localization, Components, Testable Angular-seed for Scaffolding Great Documentation and Community #DV13 @mraible
- 72.
- 73. Choosing a JavaScriptMVC Framework Simplified by one man: Addy Osmani Journey Through The JavaScript MVC Jungle Learning JavaScript Design Patterns #DV13 @mraible
- 74. Or Just ChooseAngularJS http://bit.ly/UICDZi
- 75. My Angular JSExperience
- 76.
- 77. Web Components Templates Decorators Custom Elements ShadowDOM Imports #DV13 @mraible
- 78. Polymer Polyfills Web Application Framework Setof UI Components #DV13 @mraible
- 79.
- 80. Bootstrap Good-looking websites bydefault Layouts, navs, pagination, buttons Mobile First (aka Responsive Design) Awesome jQuery Plugins / Components #DV13 @mraible
- 81. Bootstrap 3 DeepDive http://static.raibledesigns.com/bootstrap3 #DV13 @mraible
- 82. High Performance WebSites 1. Make Fewer HTTP Requests 2. Use a Content Delivery Network 3. Add Expires Headers 4. Gzip Components 5. Put Stylesheets at the Top 6. Put Scripts at the Bottom 7. Avoid CSS Expressions #DV13 @mraible
- 83. High Performance WebSites 8. Make JavaScript and CSS External 9. Reduce DNS Lookups 10. Minify JavaScript 11. Avoid Redirects 12. Remove Duplicates Scripts 13. Configure ETags 14. Make Ajax Cacheable #DV13 @mraible
- 85. My Page SpeedExperience Biggest Problem is HTTP Requests Minify and Concatenate GZipping has biggest score gain Expires Headers for Browser Caching Use Apache or Nginx Image Sprites for CSS http://spritecow.com is great #DV13 @mraible
- 86. Wro4j Open Source Javaproject for optimization of web resources Provides concatenation and minimization of JS and CSS Gzip, YUI Compressor, JsHint, JsHint, CssLint, LESS, SASS, CoffeeScript, Dojo Shrinksafe
- 87. WebJars and UrlRewriteFilter WebJars: client-side web libraries packages in JARs http://webjars.org Servlet 3, Play 2, Grails, Dropwizard, Spring MVC, Tapestry and Wicket UrlRewriteFilter: like Apache’s mod_rewrite http://tuckey.org/urlrewrite Clean URLs and just about everything else Spring MVC’s <default-servlet-handler/> is your friend #DV13 @mraible
- 88. Techniques Versioning Static Assetswith UrlRewriteFilter http://raibledesigns.com/rd/entry/ versioning_static_assets_with_urlrewritefilter Adding web resource fingerprinting to AppFuse with wro4j http://www.operatornew.com/2012/10/adding-webresource-fingerprinting-to.html #DV13 @mraible
- 89. But what aboutnginx? An open-source, high-performance HTTP server and reverse proxy, as well as an IMAP/POP3 proxy server Powers Netflix, Wordpress.com, GitHub and Heroku http://kevinworthington.com/nginx-for-mac-os-x-mountain-lion-in-2minutes/
- 90. Apache Gzip andExpires Headers mod_pagespeed - https://developers.google.com/speed/pagespeed/mod Automatically applies web performance best practices w/o modification Improving AppFuse’s PageSpeed with Apache Configured mod_deflate, mod_expires and turned on KeepAlive PageSpeed went from 24 to 96! YSlow went from 90 to 98 #DV13 @mraible
- 91. Page Speed DeepDive http://vimeo.com/mraible/page-speed-demo
- 92. /etc/httpd/conf.d/deflate.conf <IfModule mod_deflate.c>! ! SetOutputFilter DEFLATE! ! AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript! ! DeflateCompressionLevel 9! ! BrowserMatch ^Mozilla/4 gzip-only-text/html! BrowserMatch ^Mozilla/4.0[678] no-gzip! BrowserMatch bMSIE !no-gzip !gzip-only-text/html! ! DeflateFilterNote Input instream! DeflateFilterNote Output outstream! DeflateFilterNote Ratio ratio! LogFormat '%r %{outstream}n/%{instream}n (%{ratio}n%%)' deflate! </IfModule>
- 93. /etc/httpd/conf.d/expires.conf <IfModule mod_expires.c>! ExpiresActive On! <FilesMatch .(jpe?g|png|gif|js|css)$>! ExpiresDefault access plus 1 week! </FilesMatch>! ExpiresByType image/jpeg access plus 1 week! ExpiresByType image/png access plus 1 week! ExpiresByType image/gif access plus 1 week! ExpiresByType text/css access plus 1 week! ExpiresByType application/javascript access plus 1 week! ExpiresByType application/x-javascript access plus 1 week! </IfModule>
- 94.
- 95.
- 96.
- 97.
- 98.
- 99. Application Architecture Server toClient Performance implications Twitter Airbnb Charm Ajaxified Body with pjax https://github.com/defunkt/jquery-pjax
- 100. Mobile Devices If developinga mobile app with web technologies Use PhoneGap or Sencha Touch Otherwise, add a viewport meta tag <meta name=viewport content=width=devicewidth, initial-scale=1.0> #DV13 @mraible
- 101. Mobile Devices -CSS3 Media Queries /* Smartphones (portrait and landscape) ----------*/ ! @media only screen and (min-device-width: 320px) and (max-device-width: 854px) { ! /* Smartphone rules */! } ! ! /* iPad (portrait and landscape) ----------- */ ! @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { ! /* Tablet rules */! } #DV13 @mraible
- 102. Mobile Devices -Hide Address Bar <script type=text/javascript> ! // Hide address bar for smartphones ! /Mobile/.test(navigator.userAgent) && !location.hash ! && setTimeout(function () { ! if (!pageYOffset) window.scrollTo(0, 1); ! }, 1000); ! </script>! #DV13 @mraible
- 103. Mobile Devices -Disable Focus Zoom (function(doc) { ! var addEvent = 'addEventListener', ! type = 'gesturestart', ! qsa = 'querySelectorAll', ! scales = [1, 1], ! meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : []; ! ! function fix() { ! meta.content = 'width=device-width,minimum-scale=' + ! scales[0] + ',maximum-scale=' + scales[1]; ! doc.removeEventListener(type, fix, true); ! } ! ! if ((meta = meta[meta.length - 1]) && addEvent in doc) { ! fix(); ! scales = [.25, 1.6]; ! doc[addEvent](type, fix, true); ! } ! }(document));
- 104. FastClick Polyfill to removeclick delays on browsers with touch UIs Mobile Safari on iOS 3+, Chrome on iOS 5+, Chrome on Android, Opera Mobile 11.5+, Android Browser since Android 2, PlayBook OS 1+ https://github.com/ftlabs/fastclick #dv13javaweb$ #DV13 @mraible
- 105. My Mobile AppExperience #dv13javaweb$ #DV13 @mraible
- 106.
- 107.
- 108. Lessons Learned Develop MobileClient first Develop Web Client as a one-page app Don’t rely on the internet for mobile Keep static assets local for faster startup Bleeding edge can be painful #DV13 @mraible
- 109.
- 110. The Cloud Supports Ruby,Node.js, Clojure, Java, Python and Scala #DV13 @mraible
- 111. The Cloud Supports Spring,Grails, Scala, Play, Node.js, Ruby/Rails/ Sinatra Services: MySQL, PostgreSQL, MongoDB, Redis, RabbitMQ #DV13 @mraible
- 112.
- 113.
- 114. Security Matters Be awareof SQL and Content Injection Disable Cross-Site Scripting (XSS) Don’t give too much information in error pages and exceptions Stop unvalidated redirects and forwards Always use https if your application has private data Understand what browsers have to deal with #DV13 @mraible
- 115. OWASP The Open WebApplication Security Project (OWASP) is a worldwide not-for-profit charitable organization focused on improving the security of software. At OWASP you’ll find free and open ... Application security tools, complete books, standard security controls and libraries, cutting edge research http://www.owasp.org #DV13 @mraible
- 116. OWASP Top 10 1.Injection Flaws 6. Sensitive Data Exposure 2. Broken Authentication 7. Missing Access Controls 3. XSS 8. CSRF 4. Direct Object Reference 9. Using Components with Vulnerabilities 5. Security Misconfiguration 10.Unvalidated Redirects https://www.owasp.org/index.php/Top_10_2013-Top_10 #DV13 @mraible
- 117. 7 Security (Mis)Configurationsin web.xml 1. Error pages not configured 2. Authentication & Authorization Bypass 3. SSL Not Configured 4. Not Using the Secure Flag #DV13 @mraible
- 118. 7 Security (Mis)Configurationsin web.xml 5. Not Using the HttpOnly Flag 6. Using URL Parameters for Session Tracking 7. Not Setting a Session Timeout http://software-security.sans.org/blog/2010/08/11/ security-misconfigurations-java-webxml-files #DV13 @mraible
- 119. Zed Attack Proxy- ZAP https://www.owasp.org/index.php/OWASP_Zed_Attack_Proxy_Project
- 120. Fixing Vulnerabilities <session-config>! <session-timeout>15</session-timeout>! <cookie-config>! <http-only>true</http-only>! <secure>true</secure>! </cookie-config>! <tracking-mode>COOKIE</tracking-mode>! </session-config>! ! ! <form action="${ctx}/j_security_check"id="loginForm" ! method="post" autocomplete="off">! #DV13 @mraible
- 121.
- 122. Content Security Policy AnHTTP Header with whitelist of trusted content Bans inline <script> tags, inline event handlers and javascript: URLs No eval(), new Function(), setTimeout or setInterval Supported in Chrome 16+, Safari 6+, and Firefox 4+, and (very) limited in IE 10 #DV13 @mraible
- 123. The Modern JVMWeb Developer Starts with Fast Hardware Uses IntelliJ IDEA Leverages HTML5, JavaScript, and CSS3 Creates High Performance Web Sites For Mobile Devices, in the Cloud And cares about Security #DV13 @mraible
- 124. Staying Modern Read Attend Conferences Submita talk! Write Do Get Paid Open Source
- 125. Technology doesn’t createsuccess… #dv13javaweb$ #DV13 @mraible
- 126.
- 127.