The Modern Java Web Developer Bootcamp - Devoxx 2013
45 likes28,307 views
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.
![/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/85/The-Modern-Java-Web-Developer-Bootcamp-Devoxx-2013-92-320.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/85/The-Modern-Java-Web-Developer-Bootcamp-Devoxx-2013-103-320.jpg)
The Modern Java Web Developer Bootcamp - Devoxx 2013
- 1. The Modern Java Web Developer Bootcamp Matt Raible • http://raibledesigns.com Photos by The Amazing Trish McGinity
- 2. Who is Matt Raible? Founder of AppFuse Father, Skier, Cyclist Web Framework Connoisseur Bus Lover Blogger on raibledesigns.com
- 3. How about You? Have you 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 by Ben 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. Purpose
- 6. The Modern Java Web Developer JVM #DV13 @mraible
- 7. The Modern JVM Web 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
- 10. Supports Emmet (aka Zen 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 and 8 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 and 8 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
- 14. The Modern JVM Web 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 expect millisecond response times and 100% uptime. Data needs are expanding into the petabytes.” The Reactive Manifesto #DV13 @mraible
- 16. Key Building Blocks Observable Models Event Streams Stateful Clients #DV13 @mraible
- 18. Scala Venkat Subramaniam “Scala is like 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 starts a method variables are started with var or val variables are defined with name:type semicolons are not required
- 20. Scala vs. Java public class 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 class Car(val year: Int, var miles: Int) #dv13javaweb$ #DV13 @mraible
- 23. Groovy is still hot... #dv13javaweb$ #DV13 @mraible
- 24. But sliding to Scala #dv13javaweb$ #DV13 @mraible
- 25. Or not? * November 12, 2013 12:00 #dv13javaweb$ #DV13 @mraible
- 26. Groovy and Scala at Devoxx Sessions 3 3 2.25 2 1.5 0.75 0 #DV13 Scala Groovy @mraible
- 27. Learning Scala Scala for the 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 “Java remains – 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’s still the most popular! #dv13javaweb$ #DV13 @mraible
- 34. Jobs on dice.com JVM API 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
- 38. Job Trends with Spring MVC Absolute #dv13javaweb$ #DV13 Relative @mraible
- 39. Mailing List Traffic October 2013 1125 Grails 1218 Play 222 Dropwizard 0 #dv13javaweb$ #DV13 325 650 975 1300 @mraible
- 40. Tagged Questions (November 10, 2013) 14,000 10,500 7,000 3,500 0 #dv13javaweb$ #DV13 Grails Play JAX-RS Jersey Dropwizard @mraible
- 41. But if want to remain a Web Developer... #DV13 @mraible
- 43. HTTP Overview Request / Response Protocol Features: Keep-Alive HTTP Secure Binary Compression #DV13 @mraible
- 44. HTTP Methods 1.0 defined GET, 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 HTTP 2.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 for FireFox Chrome Developer Tools Elements & Console Settings PageSpeed Insights http://www.igvita.com/slides/2012/devtools-tips-and-tricks #DV13 @mraible
- 50. How do you write 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> ! <input type=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> ! <input type=email> ! <input type=submit value=Go> ! </form> #DV13 @mraible
- 53. HTML5 Killer Features Editable Text
- 55. HTML5 Storage Web Storage APIs: 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 Lasts for 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 Web SQL Database IndexedDB Not supported by IE9, iOS or Safari Application Cache File APIs #DV13 @mraible
- 60. CSS3 Secrets Animated Transitions Rounded Corners 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; ! } ! }
- 63. JavaScript The Good Parts Lambda Dynamic Objects Loose Typing Object Literals #DV13 @mraible
- 65. JavaScript Programming Patterns The Old-School Way Singleton Module Pattern Revealing Module Pattern Custom Objects Lazy Function Definition http://www.klauskomenda.com/code/javascript-programming-patterns/ #DV13 @mraible
- 68. jQuery http://trends.builtwith.com/javascript JavaScript Distribution in Top 10,000 Sites
- 69. jQuery CDN at http://code.jquery.com $(document).ready $(document).on(‘click’, ‘#selector’, function() {}) jQuery UI for Dialogs, Sliders, Calendars $.ajax and $(‘#div’).load(url) #DV13 @mraible
- 70. CoffeeScript
- 71. AngularJS A JavaScript MVW Framework From Google, MIT Licensed Data-binding, Controllers, Dependency Injection Localization, Components, Testable Angular-seed for Scaffolding Great Documentation and Community #DV13 @mraible
- 73. Choosing a JavaScript MVC Framework Simplified by one man: Addy Osmani Journey Through The JavaScript MVC Jungle Learning JavaScript Design Patterns #DV13 @mraible
- 74. Or Just Choose AngularJS http://bit.ly/UICDZi
- 75. My Angular JS Experience
- 77. Web Components Templates Decorators Custom Elements Shadow DOM Imports #DV13 @mraible
- 78. Polymer Polyfills Web Application Framework Set of UI Components #DV13 @mraible
- 80. Bootstrap Good-looking websites by default Layouts, navs, pagination, buttons Mobile First (aka Responsive Design) Awesome jQuery Plugins / Components #DV13 @mraible
- 81. Bootstrap 3 Deep Dive http://static.raibledesigns.com/bootstrap3 #DV13 @mraible
- 82. High Performance Web Sites 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 Web Sites 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 Speed Experience 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 Java project 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 UrlRewrite Filter 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 Assets with 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 about nginx? 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 and Expires 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 Deep Dive 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>
- 95. Load Testing
- 98. DIY with Metrics
- 99. Application Architecture Server to Client Performance implications Twitter Airbnb Charm Ajaxified Body with pjax https://github.com/defunkt/jquery-pjax
- 100. Mobile Devices If developing a 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 remove click 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 App Experience #dv13javaweb$ #DV13 @mraible
- 108. Lessons Learned Develop Mobile Client 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
- 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. The Cloud
- 114. Security Matters Be aware of 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 Web Application 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)Configurations in 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)Configurations in 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
- 122. Content Security Policy An HTTP 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 JVM Web 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 Submit a talk! Write Do Get Paid Open Source
- 125. Technology doesn’t create success… #dv13javaweb$ #DV13 @mraible