The Modern Java Web Developer - JavaOne 2013
82 likes39,096 views
The document outlines essential skills and tools for modern Java web developers, emphasizing the use of fast hardware, IDEs like IntelliJ IDEA, and frameworks such as jQuery, HTML5, and CSS3. It highlights the importance of creating high-performance websites that are mobile-friendly and secure, while also discussing the relevance of languages like Scala and Groovy. Key topics include optimizing web performance, utilizing the cloud, and staying updated with industry trends through continued learning and participation in conferences.
![© 2013 Raible Designs
<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>
/etc/httpd/conf.d/deflate.conf](https://image.slidesharecdn.com/themodernjavawebdeveloper-javaone2013-130926095700-phpapp02/85/The-Modern-Java-Web-Developer-JavaOne-2013-66-320.jpg)
![© 2013 Raible Designs
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/themodernjavawebdeveloper-javaone2013-130926095700-phpapp02/85/The-Modern-Java-Web-Developer-JavaOne-2013-72-320.jpg)
The Modern Java Web Developer - JavaOne 2013
- 1. The Modern Java Web Developer Matt Raible • http://raibledesigns.com Photos by Trish McGinity and Art Escobado 2013
- 2. © 2013 Raible Designs Blogger on raibledesigns.com Founder of AppFuse Father, Skier, Cyclist Web Framework Connoisseur Who is Matt Raible?
- 3. © 2013 Raible Designs 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?
- 4. © 2013 Raible Designs 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
- 5. © 2013 Raible Designs Purpose
- 6. © 2013 Raible Designs The Modern Java Web Developer JVM
- 7. © 2013 Raible Designs The Modern JVM Web Developer Starts with Fast Hardware Uses IntelliJ IDEA Leverages jQuery, HTML5, and CSS3 Creates High Performance Web Sites For Mobile Devices, in the Cloud And cares about Security
- 8. © 2013 Raible Designs Fast Hardware
- 9. © 2013 Raible Designs IntelliJ IDEA
- 10. © 2013 Raible Designs Supports 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> * In recent versions it has been renamed to Emmet
- 11. © 2013 Raible Designs 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);
- 12. © 2013 Raible Designs Java 7 and 8 Parallel Collections JSR 310 Date and Time API Functional Interfaces with default method Lambda Expressions (a.k.a. Closures) Nashorn JavaScript Engine // sort a list by lastName List<Person> persons = ...; persons.sort((p1, p2) -> p1.getLastName().compareTo(p2.getLastName()));
- 13. © 2013 Raible Designs %s/Hibernate/Spring Data Servlet 3 @WebServlet, @WebFilter, @WebListener Asynchronous Servlets WebApplicationInitializer (to eliminate web.xml) REST and Functional Programming The Modern JVM Web Developer is aware of...
- 14. © 2013 Raible Designs Reactive Applications “Users expect millisecond response times and 100% uptime. Data needs are expanding into the petabytes.” The Reactive Manifesto
- 15. © 2013 Raible Designs Key Building Blocks Observable Models Event Streams Stateful Clients
- 16. © 2013 Raible Designs Avatar? avatar.java.net
- 17. © 2013 Raible Designs Scala “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.” -- Venkat Subramaniam
- 18. © 2013 Raible Designs Scala Basics def starts a method variables are started with var or val variables are defined with name:type semicolons are not required
- 19. © 2013 Raible Designs 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; } } Scala vs. Java
- 20. © 2013 Raible Designs Scala vs. Java class Car(val year: Int, var miles: Int)
- 21. © 2013 Raible Designs What about Groovy?
- 22. © 2013 Raible Designs Groovy is still hot...
- 23. © 2013 Raible Designs But sliding to Scala
- 24. © 2013 Raible Designs 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
- 25. © 2013 Raible Designs 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/
- 26. © 2013 Raible Designs and ... it’s still the most popular!
- 27. © 2013 Raible Designs The Services Developer
- 28. © 2013 Raible Designs Fast APIs JAX-RS Dropwizard
- 29. © 2013 Raible Designs Document Your API
- 30. © 2013 Raible Designs Document Your API
- 31. © 2013 Raible Designs But if want to remain a Web Developer...
- 32. © 2013 Raible Designs Modern Principles
- 33. © 2013 Raible Designs Browser Tools Firebug for FireFox Chrome Developer Tools Elements & Console Settings PageSpeed Insights http://www.igvita.com/slides/2012/devtools-tips-and-tricks
- 34. © 2013 Raible Designs jQuery http://trends.builtwith.com/javascript/jQuery
- 35. © 2013 Raible Designs jQuery JavaScript Distribution in Top 10,000 Sites http://trends.builtwith.com/javascript
- 36. © 2013 Raible Designs jQuery 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)
- 37. © 2013 Raible Designs JavaScript The Good Parts Lambda Dynamic Objects Loose Typing Object Literals
- 38. © 2013 Raible Designs JavaScript Tips http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/
- 39. © 2013 Raible Designs 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/
- 40. © 2013 Raible Designs Revealing Module Pattern
- 41. © 2013 Raible Designs CoffeeScript
- 42. © 2013 Raible Designs 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
- 43. © 2013 Raible Designs AngularJS Basics
- 44. © 2013 Raible Designs Simplified by one man: Addy Osmani Journey Through The JavaScript MVC Jungle Learning JavaScript Design Patterns Choosing a JavaScript MVC Framework
- 45. © 2013 Raible Designs Or Just Choose AngularJS http://bit.ly/UICDZi
- 46. © 2013 Raible Designs My Angular JS Experience
- 47. © 2013 Raible Designs HTML5 http://on.wsj.com/tEGIJL
- 48. © 2013 Raible Designs How do you write HTML5? <!DOCTYPE html> <article> <aside> <section> <header> <footer> <nav> <audio> <canvas> <video> <datalist> <details> https://developer.mozilla.org/en-US/docs/HTML/HTML5 <applet> <center> <font> <frame> <frameset>
- 49. © 2013 Raible Designs <form> <input type=text required> <input type=submit value=Search/> </form> <form> <input type=text autofocus> <input type=submit value=Search/> </form> HTML5 Forms http://diveintohtml5.info/forms.html <form> <input type=text placeholder=Enter your search terms> <input type=submit value=Search/> </form>
- 50. © 2013 Raible Designs <form> <input type=email> <input type=submit value=Go> </form> HTML5 Forms
- 51. © 2013 Raible Designs HTML5 Killer Features Editable Text
- 52. © 2013 Raible Designs HTML5 Killer Features
- 53. © 2013 Raible Designs CSS3 Secrets Animated Transitions Rounded Corners Drop Shadows Gradient Colors Styling based on sibling count More cursors for better usability http://lea.verou.me/css3-secrets transform: rotateY(180deg); border-radius: 8px 8px 0 0; box-shadow: 2px 2px 4px 4px;
- 54. © 2013 Raible Designs 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; } }
- 55. © 2013 Raible Designs Cool HTML5 Demos http://fff.cmiscm.com
- 56. © 2013 Raible Designs Bootstrap Good-looking websites by default Layouts, navs, pagination, buttons Mobile First (aka Responsive Design) Over a dozen Custom jQuery Plugins Themes from {wrap}bootstrap (Market) and Bootswatch (OSS)
- 57. © 2013 Raible Designs LESS the dynamic stylesheet language
- 58. © 2013 Raible Designs 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
- 59. © 2013 Raible Designs 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
- 60. © 2013 Raible Designs 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
- 61. © 2013 Raible Designs 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
- 62. © 2013 Raible Designs Sidenote: 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
- 63. © 2013 Raible Designs 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-web-resource-fingerprinting- to.html Improving AppFuse’s PageSpeed with Apache http://raibledesigns.com/rd/entry/improving_appfuse_s_pagespeed_with
- 64. © 2013 Raible Designs 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-2- minutes/
- 65. © 2013 Raible Designs 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
- 66. © 2013 Raible Designs <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> /etc/httpd/conf.d/deflate.conf
- 67. © 2013 Raible Designs <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> /etc/httpd/conf.d/expires.conf
- 68. © 2013 Raible Designs Application Architecture Server to Client Performance implications Twitter Airbnb Charm Ajaxified Body with pjax https://github.com/defunkt/jquery-pjax
- 69. © 2013 Raible Designs 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=device- width, initial-scale=1.0>
- 70. © 2013 Raible Designs 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 */ }
- 71. © 2013 Raible Designs 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>
- 72. © 2013 Raible Designs 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));
- 73. © 2013 Raible Designs The Cloud
- 74. © 2013 Raible Designs The Cloud Supports Ruby, Node.js, Clojure, Java, Python and Scala
- 75. © 2013 Raible Designs The Cloud Supports Spring, Grails, Scala, Play, Node.js, Ruby/ Rails/Sinatra Services: MySQL, PostgreSQL, MongoDB, Redis, RabbitMQ
- 76. © 2013 Raible Designs The Cloud
- 77. © 2013 Raible Designs Apache TomEE
- 78. © 2013 Raible Designs 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
- 79. © 2013 Raible Designs The Modern JVM Web Developer Starts with Fast Hardware Uses IntelliJ IDEA Leverages jQuery, HTML5, and CSS3 Creates High Performance Web Sites For Mobile Devices, in the Cloud And cares about Security
- 80. © 2013 Raible Designs Staying Modern Read Attend Conferences Submit a talk! Write Do Get Paid Open Source
- 81. © 2013 Raible Designs Contact Me! http://raibledesigns.com @mraible Presentations http://slideshare.net/mraible Code http://github.com/mraible Questions?