The Modern Java Web Developer Bootcamp - Devoxx 2013

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?

What’s your favorite JavaScript
framework?

What do you want to learn from this talk?
#DV13

@mraible

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

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

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 ﬂy 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 deﬁned 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

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 ... it’s still the most popular!

#dv13javaweb$
#DV13

@mraible

The Services Developer

#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

0

#dv13javaweb$
#DV13

172
30
Grails

84

Play

JAX-RS

Spring MVC

@mraible

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

Trends

#dv13javaweb$
#DV13

@mraible

Job Trends

Absolute
#dv13javaweb$
#DV13

Relative
@mraible

Job Trends with Spring MVC

Absolute
#dv13javaweb$
#DV13

Relative
@mraible

Mailing List Trafﬁc
October 2013

1125

Grails

1218

Play

222

Dropwizard

0

#dv13javaweb$
#DV13

325

650

975

1300

@mraible

Tagged Questions (November 10, 2013)

14,000

10,500

7,000

3,500

0

#dv13javaweb$
#DV13

Grails

Play

JAX-RS

Jersey

Dropwizard

@mraible

But if want to remain a Web Developer...

#DV13

@mraible

HTTP Overview
Request / Response Protocol

Features:

Keep-Alive

HTTP Secure

Binary

Compression
#DV13

@mraible

HTTP Methods
1.0 deﬁned GET, POST and HEAD

1.1 deﬁned 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> !
</form>!
<form> !
<input type=text required> !
</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 Deﬁnition

http://www.klauskomenda.com/code/javascript-programming-patterns/

#DV13

@mraible

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

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
#DV13

@mraible

AngularJS Basics

#DV13

@mraible

Choosing a JavaScript MVC Framework
Simpliﬁed 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

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
Polyﬁlls

Web Application Framework

Set of UI Components

#DV13

@mraible

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. Conﬁgure 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, CoﬀeeScript, 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 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

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 Netﬂix, 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 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

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

Performance Monitoring

#DV13

@mraible

Google Analytics

#DV13

@mraible

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=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
Polyﬁll 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 ﬁrst

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

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

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

OWASP
The Open Web Application Security Project (OWASP) is a worldwide
not-for-proﬁt charitable organization focused on improving the security
of software.

At OWASP you’ll ﬁnd 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 Misconﬁguration

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

Staying Modern
Read

Attend Conferences

Submit a talk!

Write

Do

Get Paid

Open Source

Technology doesn’t 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

The Modern Java Web Developer Bootcamp - Devoxx 2013

More Related Content

What's hot

Viewers also liked

Similar to The Modern Java Web Developer Bootcamp - Devoxx 2013

More from Matt Raible

Recently uploaded

The Modern Java Web Developer Bootcamp - Devoxx 2013