The Modern Java Web Developer - JavaOne 2013

The Modern Java Web Developer
Matt Raible • http://raibledesigns.com
Photos by Trish McGinity and Art Escobado 2013

© 2013 Raible Designs
Blogger on raibledesigns.com
Founder of AppFuse
Father, Skier, Cyclist
Web Framework Connoisseur
Who is Matt Raible?

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?

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

Purpose

The Modern Java Web Developer
JVM

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

Fast Hardware

IntelliJ IDEA

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>
</ul>
</div>
* In recent versions it has been renamed to Emmet

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);

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()));

%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...

Reactive Applications
“Users expect millisecond response times and 100% uptime. Data
needs are expanding into the petabytes.”
The Reactive Manifesto

Key Building Blocks
Observable Models
Event Streams
Stateful Clients

Avatar? avatar.java.net

Scala
“Scala is like the dragon in Avatar. It will try to kill you, but if you master
it, you can ﬂy great distances with it and have a wonderful time.”
-- Venkat Subramaniam

Scala Basics
def starts a method
variables are started with var or val
variables are deﬁned with name:type
semicolons are not required

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

Scala vs. Java
class Car(val year: Int, var miles: Int)

What about Groovy?

Groovy is still hot...

But sliding to Scala

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

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/

and ... it’s still the most popular!

The Services Developer

Fast APIs
JAX-RS Dropwizard

Document Your API

But if want to remain a Web Developer...

Modern Principles

Browser Tools
Firebug for FireFox
Chrome Developer Tools
Elements & Console
Settings
PageSpeed Insights
http://www.igvita.com/slides/2012/devtools-tips-and-tricks

jQuery http://trends.builtwith.com/javascript/jQuery

jQuery
JavaScript Distribution in Top 10,000 Sites
http://trends.builtwith.com/javascript

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)

JavaScript
The Good Parts
Lambda
Dynamic Objects
Loose Typing
Object Literals

JavaScript Tips
http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/

JavaScript Programming Patterns
The Old-School Way
Singleton
Module Pattern
Revealing Module Pattern
Custom Objects
Lazy Function Deﬁnition
http://www.klauskomenda.com/code/javascript-programming-patterns/

Revealing Module Pattern

CoffeeScript

AngularJS
A JavaScript MVW Framework
From Google, MIT Licensed
Data-binding, Controllers, Dependency Injection
Localization, Components, Testable
Angular-seed for Scaﬀolding
Great Documentation and Community

AngularJS Basics

Simpliﬁed by one man: Addy Osmani
Journey Through The JavaScript MVC Jungle
Learning JavaScript Design Patterns
Choosing a JavaScript MVC Framework

Or Just Choose AngularJS
http://bit.ly/UICDZi

My Angular JS Experience

HTML5
http://on.wsj.com/tEGIJL

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>

<form>
<input type=text required>
<input type=submit value=Search/>
</form>
<form>
<input type=text autofocus>
</form>
HTML5 Forms
http://diveintohtml5.info/forms.html
<form>
<input type=text placeholder=Enter your search terms>
</form>

<form>
<input type=email>
<input type=submit value=Go>
</form>
HTML5 Forms

HTML5 Killer Features
Editable Text

HTML5 Killer Features

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;

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;
}
}

Cool HTML5 Demos http://fff.cmiscm.com

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)

LESS the dynamic stylesheet language

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

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. Conﬁgure ETags
14. Make Ajax Cacheable

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

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, CoﬀeeScript, Dojo
Shrinksafe

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

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

But what about nginx?
An open-source, high-performance HTTP server and reverse proxy, as
well as an IMAP/POP3 proxy server
Powers Netﬂix, Wordpress.com, GitHub and Heroku
http://kevinworthington.com/nginx-for-mac-os-x-mountain-lion-in-2-
minutes/

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

<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

<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

Application Architecture
Server to Client
Performance implications
Twitter
Airbnb
Charm
Ajaxiﬁed Body with pjax
https://github.com/defunkt/jquery-pjax

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>

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 */
}

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>

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));

The Cloud

The Cloud
Supports Ruby, Node.js, Clojure, Java, Python and Scala

The Cloud
Supports Spring, Grails, Scala, Play, Node.js, Ruby/
Rails/Sinatra
Services: MySQL, PostgreSQL, MongoDB, Redis,
RabbitMQ

Apache TomEE

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

Staying Modern
Read
Attend Conferences
Submit a talk!
Write
Do
Get Paid
Open Source

Contact Me!
http://raibledesigns.com
@mraible
Presentations
http://slideshare.net/mraible
Code
http://github.com/mraible
Questions?

The Modern Java Web Developer - JavaOne 2013

More Related Content

The Modern Java Web Developer - JavaOne 2013