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 raiblede...
How about You?
Have you developed a Struts 1
application? Used PHP?

Have you every written CSS from
scratch?

Why do you ...
Topic Inspiration
Inspired by Ben Evan’s and Martijn Verburg’s The Well-Grounded
Java Developer

Developing with Java 7

V...
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...
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=nav...
Java 7 and 8
Strings in switch statements

Diamond Syntax

Try with resources

Improved exception handling with multi-catc...
Java 7 and 8
Parallel Collections

JSR 310 Date and Time API

Functional Interfaces with default method

Lambda Expression...
Java 8 Parallelism
The Modern JVM Web Developer is aware of...
%s/Hibernate/Spring Data

Servlet 3

@WebServlet, @WebFilter, @WebListener

As...
Reactive Applications
“Users expect millisecond response times and 100% uptime. Data
needs are expanding into the petabyte...
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 ...
Scala Basics
def starts a method

variables are started with var or val

variables are defined with name:type 

semicolons ...
Scala vs. Java
public class Car { !
private final int year; !
private int miles; !
!
public int getYear() { return year; }...
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...
The Java Language
“Java remains – in spite of the fragmented programming language
landscape – a viable, growing language.”...
and ... it’s 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

0

#dv13javaweb$
#DV13

172
30
Grails

84

Play...
Skills
JVM API Frameworks, November 2013
20,000

19228

18128
15,000

10,000

5,000

0

#dv13javaweb$
#DV13

5784

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

0

#dv13javaweb$
#DV13

325

650

975

1300

...
Tagged Questions (November 10, 2013)

14,000

10,500

7,000

3,500

0

#dv13javaweb$
#DV13

Grails

Play

JAX-RS

Jersey

...
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, ...
SPDY and HTTP 2.0
Allows client and server to compress request and response headers

Allows multiple, simultaneously multi...
Browser Tools
Firebug for FireFox

Chrome Developer Tools

Elements & Console

Settings

PageSpeed Insights

http://www.ig...
HTML5

http://on.wsj.com/tEGIJL
How do you write HTML5?
<!DOCTYPE html>
<article> <aside> <section>
<header> <footer> <nav>
<audio> <canvas> <video>
<data...
HTML5 Forms
<form> !
<input type=text placeholder=Enter your search terms> !
<input type=submit value=Search> !
</form>!
<...
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
...
window.localStorage
Simple key / value store

Persistent through page reloads

Great for storing user preferences

Avoids ...
window.sessionStorage
Same as localStorage

Lasts for browser session

New window / tab starts new session

Great for sens...
Other Storage APIs
Web SQL Database

IndexedDB

	 Not supported by IE9, iOS or Safari

Application Cache

File APIs

#DV13...
Browser Support	

#DV13

@mraible
CSS3 Secrets
Animated Transitions

Rounded Corners

Drop Shadows

Gradient Colors


transform: rotateY(180deg);
border-rad...
CSS3 Media Queries
/* Smartphones (portrait and landscape) ----------- */ !
@media only screen and (min-device-width: 320p...
Cool HTML5 Demos

#DV13

http://fff.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

L...
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 fo...
CoffeeScript
AngularJS
A JavaScript MVW Framework

From Google, MIT Licensed

Data-binding, Controllers, Dependency Injection

Localiza...
AngularJS Basics

#DV13

@mraible
Choosing a JavaScript MVC Framework
Simplified by one man: Addy Osmani

Journey Through The JavaScript MVC Jungle

Learning...
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)

Awes...
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...
High Performance Web Sites
8. Make JavaScript and CSS External

9. Reduce DNS Lookups

10. Minify JavaScript

11. Avoid Re...
My Page Speed Experience
Biggest Problem is HTTP Requests

Minify and Concatenate

GZipping has biggest score gain

Expire...
Wro4j
Open Source Java project for optimization of
web resources

Provides concatenation and minimization of
JS and CSS

G...
WebJars and UrlRewrite Filter
WebJars: client-side web libraries packages in JARs

http://webjars.org

Servlet 3, Play 2, ...
Techniques
Versioning Static Assets with UrlRewriteFilter

http://raibledesigns.com/rd/entry/
versioning_static_assets_wit...
But what about nginx?
An open-source, high-performance HTTP server and reverse proxy, as
well as an IMAP/POP3 proxy server...
Apache Gzip and Expires Headers
mod_pagespeed - https://developers.google.com/speed/pagespeed/mod

Automatically applies w...
Page Speed Deep Dive

http://vimeo.com/mraible/page-speed-demo
/etc/httpd/conf.d/deflate.conf
<IfModule mod_deflate.c>!
!
    SetOutputFilter DEFLATE!
!
    AddOutputFilterByType DEFLAT...
/etc/httpd/conf.d/expires.conf
<IfModule mod_expires.c>!
    ExpiresActive On!
    <FilesMatch .(jpe?g|png|gif|js|css)$>!
...
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...
Mobile Devices
If developing a mobile app with web
technologies

Use PhoneGap or Sencha Touch

Otherwise, add a viewport m...
Mobile Devices - CSS3 Media Queries
/* Smartphones (portrait and landscape) ----------*/ !
@media only screen and (min-dev...
Mobile Devices - Hide Address Bar
<script type=text/javascript> !
// Hide address bar for smartphones !
/Mobile/.test(navi...
Mobile Devices - Disable Focus Zoom
(function(doc) { !
var addEvent = 'addEventListener', !
type = 'gesturestart', !
qsa =...
FastClick
Polyfill to remove click delays on browsers with touch UIs

Mobile Safari on iOS 3+, Chrome on iOS 5+, Chrome on ...
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

Don’t rely on the internet for mobile

K...
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,...
The Cloud
Apache TomEE

#DV13

@mraible
Security Matters
Be aware of SQL and Content Injection

Disable Cross-Site Scripting (XSS)

Don’t give too much informatio...
OWASP
The Open Web Application Security Project (OWASP) is a worldwide
not-for-profit charitable organization focused on im...
OWASP Top 10
1. Injection Flaws


6. Sensitive Data Exposure


2. Broken Authentication


7. Missing Access Controls


3. ...
7 Security (Mis)Configurations in web.xml
1. Error pages not configured

2. Authentication & Authorization Bypass

3. SSL No...
7 Security (Mis)Configurations in web.xml
5. Not Using the HttpOnly Flag

6. Using URL Parameters for Session
Tracking

7. ...
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-onl...
Content Security Policy
Content Security Policy
An HTTP Header with whitelist of trusted content

Bans inline <script> tags, inline event handlers...
The Modern JVM Web Developer
Starts with Fast Hardware

Uses IntelliJ IDEA

Leverages HTML5, JavaScript, and CSS3

Creates...
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://g...
The Modern Java Web Developer Bootcamp - Devoxx 2013
The Modern Java Web Developer Bootcamp - Devoxx 2013
The Modern Java Web Developer Bootcamp - Devoxx 2013
Upcoming SlideShare
Loading in...5
×

The Modern Java Web Developer Bootcamp - Devoxx 2013

22,308

Published on

HTML5, CSS3, JavaScript, jQuery, Angular JS, Bootstrap, Mobile, CoffeeScript, GitHub, functional programming, Page Speed, Apache, JSON with Jackson, caching, REST, Security, load testing, profiling, Wro4j, Heroku, Cloudbees, AWS.

These are just some of the buzzwords that a Java web developer hears on a daily basis. This talk is designed to expose you to a plethora of technologies that you might've heard about, but haven't learned yet. We'll concentrate on the most important web developer skills, as well as UI tips and tricks to make you a better front-end engineer. Some of the most valuable engineers these days have front-end JS/CSS skills, as well as backend Java skills.

This presentation is from the University session I delivered at Devoxx 2013, in Antwerp. http://devoxx.be/dv13-matt-raible.html?presId=3648

Published in: Technology
0 Comments
37 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
22,308
On Slideshare
0
From Embeds
0
Number of Embeds
58
Actions
Shares
0
Downloads
3,172
Comments
0
Likes
37
Embeds 0
No embeds

No notes for slide

The Modern Java Web Developer Bootcamp - Devoxx 2013

  1. 1. The Modern Java Web Developer Bootcamp Matt Raible • http://raibledesigns.com Photos by The Amazing Trish McGinity
  2. 2. Who is Matt Raible? Founder of AppFuse Father, Skier, Cyclist Web Framework Connoisseur Bus Lover Blogger on raibledesigns.com
  3. 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. 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. 5. Purpose
  6. 6. The Modern Java Web Developer JVM #DV13 @mraible
  7. 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
  8. 8. Fast Hardware #DV13 @mraible
  9. 9. IntelliJ IDEA #DV13 @mraible
  10. 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. 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. 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
  13. 13. Java 8 Parallelism
  14. 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. 15. Reactive Applications “Users expect millisecond response times and 100% uptime. Data needs are expanding into the petabytes.” The Reactive Manifesto #DV13 @mraible
  16. 16. Key Building Blocks Observable Models Event Streams Stateful Clients #DV13 @mraible
  17. 17. Avatar? #dv13javaweb$ #DV13 avatar.java.net @mraible
  18. 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. 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. 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. 21. Scala vs. Java class Car(val year: Int, var miles: Int) #dv13javaweb$ #DV13 @mraible
  22. 22. What about Groovy? #dv13javaweb$ #DV13 @mraible
  23. 23. Groovy is still hot... #dv13javaweb$ #DV13 @mraible
  24. 24. But sliding to Scala #dv13javaweb$ #DV13 @mraible
  25. 25. Or not? * November 12, 2013 12:00 #dv13javaweb$ #DV13 @mraible
  26. 26. Groovy and Scala at Devoxx Sessions 3 3 2.25 2 1.5 0.75 0 #DV13 Scala Groovy @mraible
  27. 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. 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. 29. and ... it’s still the most popular! #dv13javaweb$ #DV13 @mraible
  30. 30. The Services Developer #DV13 @mraible
  31. 31. Document Your API #DV13 @mraible
  32. 32. Document Your API #DV13 @mraible
  33. 33. Fast APIs Dropwizard #DV13 @mraible
  34. 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. 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
  36. 36. Trends #dv13javaweb$ #DV13 @mraible
  37. 37. Job Trends Absolute #dv13javaweb$ #DV13 Relative @mraible
  38. 38. Job Trends with Spring MVC Absolute #dv13javaweb$ #DV13 Relative @mraible
  39. 39. Mailing List Traffic October 2013 1125 Grails 1218 Play 222 Dropwizard 0 #dv13javaweb$ #DV13 325 650 975 1300 @mraible
  40. 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. 41. But if want to remain a Web Developer... #DV13 @mraible
  42. 42. Modern Principles
  43. 43. HTTP Overview Request / Response Protocol Features: Keep-Alive HTTP Secure Binary Compression #DV13 @mraible
  44. 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. 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
  46. 46. 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
  47. 47. HTML5 http://on.wsj.com/tEGIJL
  48. 48. 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
  49. 49. 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
  50. 50. HTML5 Forms <form> ! <input type=email> ! <input type=submit value=Go> ! </form> #DV13 @mraible
  51. 51. HTML5 Killer Features Editable Text
  52. 52. HTML5 Killer Features #DV13 @mraible
  53. 53. HTML5 Storage Web Storage APIs: localStorage / sessionStorage Web SQL Database IndexedDB Application Cache File* APIs #DV13 @mraible
  54. 54. 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
  55. 55. 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
  56. 56. Other Storage APIs Web SQL Database IndexedDB Not supported by IE9, iOS or Safari Application Cache File APIs #DV13 @mraible
  57. 57. Browser Support #DV13 @mraible
  58. 58. 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
  59. 59. 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; ! } ! }
  60. 60. Cool HTML5 Demos #DV13 http://fff.cmiscm.com @mraible
  61. 61. JavaScript The Good Parts Lambda Dynamic Objects Loose Typing Object Literals #DV13 @mraible
  62. 62. JavaScript Tips http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/ #DV13 @mraible
  63. 63. 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
  64. 64. Revealing Module Pattern
  65. 65. jQuery http://trends.builtwith.com/javascript/jQuery
  66. 66. jQuery http://trends.builtwith.com/javascript JavaScript Distribution in Top 10,000 Sites
  67. 67. 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
  68. 68. CoffeeScript
  69. 69. 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
  70. 70. AngularJS Basics #DV13 @mraible
  71. 71. Choosing a JavaScript MVC Framework Simplified by one man: Addy Osmani Journey Through The JavaScript MVC Jungle Learning JavaScript Design Patterns #DV13 @mraible
  72. 72. Or Just Choose AngularJS http://bit.ly/UICDZi
  73. 73. My Angular JS Experience
  74. 74. AngularJS Deep Dive http://vimeo.com/mraible/angularjs-deep-dive #dv13javaweb$ #DV13 @mraible
  75. 75. Web Components Templates Decorators Custom Elements Shadow DOM Imports #DV13 @mraible
  76. 76. Polymer Polyfills Web Application Framework Set of UI Components #DV13 @mraible
  77. 77. Polymer Bare Bones
  78. 78. Bootstrap Good-looking websites by default Layouts, navs, pagination, buttons Mobile First (aka Responsive Design) Awesome jQuery Plugins / Components #DV13 @mraible
  79. 79. Bootstrap 3 Deep Dive http://static.raibledesigns.com/bootstrap3 #DV13 @mraible
  80. 80. 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
  81. 81. 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
  82. 82. 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
  83. 83. 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
  84. 84. 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
  85. 85. 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
  86. 86. 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/
  87. 87. 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
  88. 88. Page Speed Deep Dive http://vimeo.com/mraible/page-speed-demo
  89. 89. /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>
  90. 90. /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>
  91. 91. PageSpeed with Apache http://raibledesigns.com/rd/entry/improving_appfuse_s_pagespeed_with
  92. 92. Load Testing
  93. 93. Performance Monitoring #DV13 @mraible
  94. 94. Google Analytics #DV13 @mraible
  95. 95. DIY with Metrics
  96. 96. Application Architecture Server to Client Performance implications Twitter Airbnb Charm Ajaxified Body with pjax https://github.com/defunkt/jquery-pjax
  97. 97. 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
  98. 98. 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
  99. 99. 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
  100. 100. 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));
  101. 101. 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
  102. 102. My Mobile App Experience #dv13javaweb$ #DV13 @mraible
  103. 103. PhoneGap #dv13javaweb$ #DV13 @mraible
  104. 104. Background Modes #dv13javaweb$ #DV13 @mraible
  105. 105. 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
  106. 106. The Cloud #DV13 @mraible
  107. 107. The Cloud Supports Ruby, Node.js, Clojure, Java, Python and Scala #DV13 @mraible
  108. 108. The Cloud Supports Spring, Grails, Scala, Play, Node.js, Ruby/Rails/ Sinatra Services: MySQL, PostgreSQL, MongoDB, Redis, RabbitMQ #DV13 @mraible
  109. 109. The Cloud
  110. 110. Apache TomEE #DV13 @mraible
  111. 111. 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
  112. 112. 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
  113. 113. 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
  114. 114. 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
  115. 115. 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
  116. 116. Zed Attack Proxy - ZAP https://www.owasp.org/index.php/OWASP_Zed_Attack_Proxy_Project
  117. 117. 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
  118. 118. Content Security Policy
  119. 119. 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
  120. 120. 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
  121. 121. Staying Modern Read Attend Conferences Submit a talk! Write Do Get Paid Open Source
  122. 122. Technology doesn’t create success… #dv13javaweb$ #DV13 @mraible
  123. 123. People do. #dv13javaweb$ #DV13 @mraible
  124. 124. Questions? Contact Me! http://raibledesigns.com @mraible Presentations http://slideshare.net/mraible Code http://github.com/mraible
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×