The Modern Java Web Developer Bootcamp

Matt Raible http://raibledesigns.com

Photos by The Amazing Trish McGinity

Who is Matt Raible?

Founder of AppFuse

Father, Skier, Cyclist

Web Framework Connoisseur

Bus Lover

Blogger on raibledesigns.com

How about You?

Have you developed a Struts 1
application? Used PHP?

Have you every written CSS from

scratch?

Why do you hate JavaScript?

Whats your favorite JavaScript

framework?

What do you want to learn from this talk?

#DV13

@mraible

Topic Inspiration
Inspired by Ben Evans and Martijn Verburgs The Well-Grounded
Java Developer

Developing with Java 7

Vital techniques

Polyglot programming on the JVM

Crafting the polyglot project

#DV13

@mraible

Purpose

The Modern Java Web Developer

JVM
#DV13

@mraible

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

Fast Hardware

#DV13

@mraible

IntelliJ IDEA

#DV13

@mraible

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

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

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

Java 8 Parallelism

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

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

The Reactive Manifesto

#DV13

@mraible

Key Building Blocks

Observable Models

Event Streams

Stateful Clients

#DV13

@mraible

Avatar?

#dv13javaweb$
#DV13

avatar.java.net

@mraible

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

Scala Basics
def starts a method

variables are started with var or val

variables are defined with name:type

semicolons are not required

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

Scala vs. Java

class Car(val year: Int, var miles: Int)

#dv13javaweb$
#DV13

@mraible

What about Groovy?

#dv13javaweb$
#DV13

@mraible

Groovy is still hot...

#dv13javaweb$
#DV13

@mraible

But sliding to Scala

#dv13javaweb$
#DV13

@mraible

Or not?

* November 12, 2013 12:00

#dv13javaweb$
#DV13

@mraible

Groovy and Scala at Devoxx

Sessions
3

2.25

2
1.5
0.75
0

#DV13

Scala

Groovy

@mraible

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

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

and ... its still the most popular!

#dv13javaweb$
#DV13

@mraible

The Services Developer

#DV13

@mraible

Document Your API

#DV13

@mraible

Document Your API

#DV13

@mraible

Fast APIs

Dropwizard

#DV13

@mraible

Jobs on dice.com
JVM API Frameworks, November 2013
600

564
450

300

150

#dv13javaweb$
#DV13

172

Grails

30

84

Play

JAX-RS

Spring MVC

@mraible

Skills
JVM API Frameworks, November 2013
20,000

19228

18128
15,000

10,000

5,000

#dv13javaweb$
#DV13

5784

Grails

Play

4132
JAX-RS

Spring MVC

@mraible

Trends

#dv13javaweb$
#DV13

@mraible

Job Trends

Absolute
#dv13javaweb$
#DV13

Relative
@mraible

Job Trends with Spring MVC

Absolute
#dv13javaweb$
#DV13

Relative
@mraible

Mailing List Traffic

October 2013

1125

Grails

1218

Play

222

Dropwizard

#dv13javaweb$
#DV13

325

650

975

1300

@mraible

Tagged Questions (November 10, 2013)

14,000

10,500

7,000

3,500

#dv13javaweb$
#DV13

Grails

Play

JAX-RS

Jersey

Dropwizard

@mraible

But if want to remain a Web Developer...

#DV13

@mraible

Modern Principles

HTTP Overview
Request / Response Protocol

Features:

Keep-Alive

HTTP Secure

Binary

Compression
#DV13

@mraible

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

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

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

HTML5

http://on.wsj.com/tEGIJL

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

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

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

#DV13

@mraible

HTML5 Killer Features

Editable Text

HTML5 Killer Features

#DV13

@mraible

HTML5 Storage
Web Storage APIs: localStorage / sessionStorage

Web SQL Database

IndexedDB

Application Cache

File* APIs

#DV13

@mraible

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

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

Other Storage APIs

Web SQL Database

IndexedDB

Not supported by IE9, iOS or Safari

Application Cache

File APIs

#DV13

@mraible

Browser Support

#DV13

@mraible

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

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

#DV13

http://f.cmiscm.com

@mraible

JavaScript
The Good Parts

Lambda

Dynamic Objects

Loose Typing

Object Literals

#DV13

@mraible

JavaScript Tips

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

#DV13

@mraible

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

Revealing Module Pattern

jQuery

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

jQuery

http://trends.builtwith.com/javascript

JavaScript Distribution in Top 10,000 Sites

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

CoffeeScript

AngularJS
A JavaScript MVW Framework

From Google, MIT Licensed

Data-binding, Controllers, Dependency Injection

Localization, Components, Testable

Angular-seed for Scaolding

Great Documentation and Community

#DV13

@mraible

AngularJS Basics

#DV13

@mraible

Choosing a JavaScript MVC Framework

Simplified by one man: Addy Osmani

Journey Through The JavaScript MVC Jungle

Learning JavaScript Design Patterns

#DV13

@mraible

Or Just Choose AngularJS

http://bit.ly/UICDZi

My Angular JS Experience

AngularJS Deep Dive

http://vimeo.com/mraible/angularjs-deep-dive
#dv13javaweb$
#DV13

@mraible

Web Components
Templates

Decorators

Custom Elements

Shadow DOM

Imports

#DV13

@mraible

Polymer
Polyfills

Web Application Framework

Set of UI Components

#DV13

@mraible

Polymer Bare Bones

Bootstrap
Good-looking websites by default

Layouts, navs, pagination, buttons

Mobile First (aka Responsive Design)

Awesome jQuery Plugins / Components

#DV13

@mraible

Bootstrap 3 Deep Dive

http://static.raibledesigns.com/bootstrap3
#DV13

@mraible

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

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

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

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, CoeeScript, Dojo
Shrinksafe

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 Apaches mod_rewrite

http://tuckey.org/urlrewrite

Clean URLs and just about everything else

Spring MVCs <default-servlet-handler/> is your friend

#DV13

@mraible

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

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/

Apache Gzip and Expires Headers

mod_pagespeed - https://developers.google.com/speed/pagespeed/mod

Automatically applies web performance best practices w/o modification

Improving AppFuses 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

Page Speed Deep Dive

http://vimeo.com/mraible/page-speed-demo

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

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

PageSpeed with Apache

http://raibledesigns.com/rd/entry/improving_appfuse_s_pagespeed_with

Load Testing

Performance Monitoring

#DV13

@mraible

Google Analytics

#DV13

@mraible

DIY with Metrics

Application Architecture
Server to Client

Performance implications

Twitter

Airbnb

Charm

Ajaxified 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=devicewidth, initial-scale=1.0>

#DV13

@mraible

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

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

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

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

My Mobile App Experience

#dv13javaweb$
#DV13

@mraible

PhoneGap

#dv13javaweb$
#DV13

@mraible

Background Modes

#dv13javaweb$
#DV13

@mraible

Lessons Learned
Develop Mobile Client first

Develop Web Client as a one-page app

Dont rely on the internet for mobile

Keep static assets local for faster startup

Bleeding edge can be painful

#DV13

@mraible

The Cloud

#DV13

@mraible

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

#DV13

@mraible

The Cloud
Supports Spring, Grails, Scala, Play, Node.js, Ruby/Rails/
Sinatra

Services: MySQL, PostgreSQL, MongoDB, Redis, RabbitMQ

#DV13

@mraible

The Cloud

Apache TomEE

#DV13

@mraible

Security Matters
Be aware of SQL and Content Injection

Disable Cross-Site Scripting (XSS)

Dont 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

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 youll find free and open ...

Application security tools, complete books, standard security controls

and libraries, cutting edge research

http://www.owasp.org
#DV13

@mraible

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

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

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

Zed Attack Proxy - ZAP

https://www.owasp.org/index.php/OWASP_Zed_Attack_Proxy_Project

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

Content Security Policy

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

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

Staying Modern
Read

Attend Conferences

Submit a talk!

Write

Do

Get Paid

Open Source

Technology doesnt create success

#dv13javaweb$
#DV13

@mraible

People do.

#dv13javaweb$
#DV13

@mraible

Questions?
Contact Me!

http://raibledesigns.com

@mraible

Presentations

http://slideshare.net/mraible

Code

http://github.com/mraible