@spring_io #springio17

Front End Development for Back End Developers

Matt Raible @mraible

Blogger on raibledesigns.com

Web Developer and Java Champion

Father, Skier, Mountain Biker, Whitewater Rafter

Open Source Connoisseur

Who is Matt Raible?

Bus LoverOkta Developer Advocate

@spring_io #springio17@spring_io

#springio17

Authentication Standards

@spring_io #springio17

What about You?How many consider themselves backend developers?

Java, .NET, Python, or Node.js?

Do you write code for UIs?

Do you like JavaScript?

What JavaScript Frameworks do you use?

My Web Dev Journey

@spring_io #springio17

What is modern front end development?

@spring_io #springio17

Web Frameworks Over the Years

https://github.com/mraible/history-of-web-frameworks-timeline

@spring_io #springio17@spring_io

#springio17

JSF

https://zeroturnaround.com/webframeworksindex

❤

@spring_io #springio17

JavaScript Framework Explosion

@spring_io #springio17

Let’s do some learning!

@spring_io #springio17

ES6, ES7 and TypeScript

ES5: es5.github.io

ES6: git.io/es6features

ES7: bit.ly/es7features

TS: www.typescriptlang.org TSES7 ES6 ES5

@spring_io #springio17

TypeScript$ npm install -g typescript

function greeter(person: string) { return "Hello, " + person;} var user = "Jane User"; document.body.innerHTML = greeter(user);

$ tsc greeter.ts

https://www.typescriptlang.org/docs/tutorial.html

@spring_io #springio17@spring_io

#springio17

bus.ts

@spring_io #springio17

TypeScript 2.3

“Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.”

https://nodejs.org

https://github.com/creationix/nvm

@spring_io #springio17

Front End Build ToolsOld School: Gulp

New School: SystemJS

Hip: Webpack

Web Dependencies:

Old School: Bower

New School: npm

Hip: yarn

@spring_io #springio17

Yeoman

The web's scaffolding tool for modern webapps

Helps you kickstart new projects

Promotes the Yeoman workflow

yeoman.io

@spring_io #springio17

Browsersync browsersync.io

@spring_io #springio17

Gulp

gulp.task('serve', function() {

browserSync.init({ server: './app' });

gulp.watch(['app/**/*.js', 'app/**/*.css', 'app/**/*.html']) .on('change', browserSync.reload); });

@spring_io #springio17

Webpack

@spring_io #springio17

webpack.config.js

module.exports = { entry: './src/app.js', output: { path: __dirname + '/src/main/webapp/public', filename: 'bundle.js' }, module: { loaders: [ { test: /.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015', 'react'] } } ] } };

@spring_io #springio17

Cool Webpack Featureswebpack-bundle-analyzer

webpack-dashboard

@spring_io #springio17

webpack for real tasks

Building front-end and adding compilation

Decreasing front-end size and improving assets caching

Speeding up build and improving the development workflow

iamakulov.com/pages/webpack

https://xkcd.com/303/

@spring_io #springio17@spring_io

#springio17

Leading JavaScript Frameworks in 2017

angular.io

facebook.github.io/react

vuejs.org

@spring_io #springio17@spring_io

#springio17

Jobs on IndeedMay 2017

0

2,000

4,000

6,000

8,000

Angular Aurelia Backbone Ember Knockout React Vue

@spring_io #springio17@spring_io

#springio17

Stack Overflow Tags

May 2017

0

12,500

25,000

37,500

50,000

Angular Aurelia Backbone Knockout Ember React Vue

@spring_io #springio17

Stack Overflow Trends

https://stackoverflow.blog/2017/05/09/introducing-stack-overflow-trends

@spring_io #springio17@spring_io

#springio17

GitHub StarsMay 2017

0

17,500

35,000

52,500

70,000

Angular Aurelia Backbone Knockout Ember React Vue

@spring_io #springio17

Hello World with Angular

import { Component } from '@angular/core';

@Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>` }) export class AppComponent { name = 'World'; }

<my-app></my-app>

https://angular.io/docs/ts/latest/quickstart.html

@spring_io #springio17

Hello World with Angularimport { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

@spring_io #springio17

Hello World with Angular

import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module'; import { environment } from './environments/environment';

if (environment.production) { enableProdMode(); }

platformBrowserDynamic().bootstrapModule(AppModule);

@spring_io #springio17

Angular CLI

@spring_io #springio17

Angular CLI

@spring_io #springio17

Get Started with Angular

Angular QuickStart

https://angular.io/docs/ts/latest/quickstart.html

Angular Seed

https://github.com/mgechev/angular-seed

Angular Seed Advanced

https://github.com/NathanWalker/angular-seed-advanced

@spring_io #springio17

Angular and Angular CLI Demos

https://github.com/mraible/ng-demo

https://youtu.be/Jq3szz2KOOs (Building)

https://youtu.be/TksyjxipM4M (Testing)

@spring_io #springio17

Authentication with OpenID Connect

http://developer.okta.com

http://bit.ly/ng-okta

youtube.com/watch?v=Kb56GzQ2pSk

@spring_io #springio17

ng-book 2A comprehensive guide to developing with Angular 4

Worth all your hard earned $$$

https://www.ng-book.com/2

“Thank you for the awesome book, it's the bible for Angular.” — Vijay Ganta

@spring_io #springio17

Hello World with React

http://codepen.io/gaearon/pen/ZpvBNJ?editors=0100

<div id="root"></div>

<script> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') ); </script>

@spring_io #springio17

Learning React

https://vimeo.com/213710634

@spring_io #springio17

Imperative Codeif (count > 99) { if (!hasFile()) { addFire(); } } else { if (hasFire()) { removeFire(); } } if (count === 0) { if (hasBadge()) { removeBadge(); } return; } if (!hasBadge()) { addBadge(); } var countText = count > 99 ? "99+" : count.toString(); getBadge().setText(countText);

@spring_io #springio17

Declarative Codeif (count === 0) { return <div className="bell"/>; } else if (count <= 99) { return ( <div className="bell"> <span className="badge">{count}</span> </div> ); } else { return ( <div className="bell onFire"> <span className="badge">99+</span> </div> ); }

@spring_io #springio17

Create React App

@spring_io #springio17

Create React App

@spring_io #springio17@spring_io

#springio17

Ships with documentation!

@spring_io #springio17

Hello World with Vue.js

https://jsfiddle.net/chrisvfritz/50wL7mdz/

<div id="app"> <p>{{ message }}</p> </div>

<script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }); </script>

@spring_io #springio17@spring_io

#springio17

Learning Vue.js

https://youtu.be/utJGnK9D_UQ

@spring_io #springio17

Vue.js Code

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app"> <button v-on:click="clickedButton()">Click here!</button> </div>

<script> new Vue({ el: '#app', methods: { clickedButton: function(event) { console.log(event); alert("You clicked the button!"); } } }); </script>

@spring_io #springio17

Vue CLI

@spring_io #springio17

Vue CLI

@spring_io #springio17@spring_io

#springio17

Server-Side Support

Angular Universal merged into Angular 4

mobile.twitter.com

Nuxt.js

@spring_io #springio17@spring_io

#springio17

Server-Side Java Support

http://www.commitstrip.com/en/2015/09/16/how-to-choose-the-right-javascript-framework/

http://www.commitstrip.com/en/2015/09/16/how-to-choose-the-right-javascript-framework/

@spring_io #springio17

Cascading Style Sheets

#app { background: #eee; }

.blog-post { padding: 20px; }

.blog-post > p:first { font-weight: 400; }

img + span.caption { font-style: italic; }

@spring_io #springio17

Sass: Syntactically Awesome Style Sheets

#app { background: #eee;

.blog-post { padding: 20px; > p:first { font-weight: 400; }

img + span.caption { font-style: italic; } } } http://sass-lang.com

@spring_io #springio17@spring_io

#springio17

CSS Frameworks

@spring_io #springio17@spring_io

#springio17

Bootstrap 4

@spring_io #springio17@spring_io

#springio17

Bootstrap 4

@spring_io #springio17@spring_io

#springio17

CSS Framework Stars on GitHub

May 2017

0

30,000

60,000

90,000

120,000

Bootstrap Foundation Pure Skeleton

@spring_io #springio17

Front End Performance Optimization

Reduce HTTP Requests

Gzip HTML, JavaScript, and CSS

Far Future Expires Headers

Code Minification

Optimize Images

@spring_io #springio17

HTTP/2Binary, instead of textual

Fully multiplexed, instead of ordered and blocking

Can use one connection for parallelism

Uses header compression to reduce overhead

Allows servers to “push” responses proactively into client caches

@spring_io #springio17

HTTP/2 in JHipster

/* * Enable HTTP/2 for Undertow - https://twitter.com/ankinson/status/829256167700492288 * HTTP/2 requires HTTPS, so HTTP requests will fallback to HTTP/1.1. * See the JHipsterProperties class and your application-*.yml configuration files * for more information. */ if (jHipsterProperties.getHttp().getVersion().equals(JHipsterProperties.Http.Version.V_2_0)) { if (container instanceof UndertowEmbeddedServletContainerFactory) { ((UndertowEmbeddedServletContainerFactory) container) .addBuilderCustomizers((builder) -> { builder.setServerOption(UndertowOptions.ENABLE_HTTP2, true); }); } }

@spring_io #springio17

HTTP/2 Server Push in Java

http://bit.ly/dz-server-push-java

@WebServlet(value = {"/http2"}) public class Http2Servlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) { PushBuilder pushBuilder = req.newPushBuilder(); pushBuilder.path("images/kodedu-logo.png") .addHeader("content-type", "image/png") .push(); try (PrintWriter respWriter = resp.getWriter();) { respWriter.write("<html>" + "<img src='images/kodedu-logo.png'>" + "</html>"); } } }

https://twitter.com/kosamari/status/859958929484337152

@spring_io #springio17

Chrome Developer Tools

Follow Umar Hansa - @umaar

Follow Addy Osmani - @addyosmani

@spring_io #springio17

Framework Tools

Angular Augury

React Developer Tools

vue-devtools

@spring_io #springio17@spring_io

#springio17

Progressive Web Apps

“We’ve failed on mobile”

— Alex Russellhttps://youtu.be/K1SFnrf4jZo

@spring_io #springio17

Mobile Hates You!How to fight back:

Implement PRPL

Get a ~$150-200 unlocked Android (e.g. Moto G4)

Use chrome://inspect && chrome://inspect?tracing

Lighthouse

DevTools Network & CPU Throttling

@spring_io #springio17

The PRPL Pattern

Push

Render

Pre-cache

Lazy-load

@spring_io #springio17

The PRPL Pattern

Push critical resources for the initial URL route

Render initial route

Pre-cache remaining routes

Lazy-load and create remaining routes on demand

developer.okta.com/blog

@spring_io #springio17@spring_io

#springio17

Security: OWASP Top 10

1. Injection

2. Broken Auth & Session Mgmt

3. Cross-Site Scripting (XSS)

4. Broken Access Control

5. Security Misconfiguration

6. Sensitive Data Exposure

7. Insufficient Attack Protection

8. Cross-Site Request Forgery

9. Components w/ Vulnerabilities

10. Underprotected APIs

@spring_io #springio17@spring_io

#springio17

JHipster jhipster.github.io

@spring_io #springio17

The JHipster Mini-Book2.0 Release on Dec 5, 2016

jhipster-book.com

21-points.com

@jhipster_book

Write your own InfoQ mini-book! github.com/mraible/infoq-mini-book

@spring_io #springio17

What You Learned

ES6 and TypeScript

Node.js and nvm

Angular, React, and Vue.js

CSS and Sass

Front End Performance Optimization

Progressive Web Apps

@spring_io #springio17

Try

#Devoxx4Kids

@spring_io #springio17

Quality“A person who knows how to fix motorcycles—with Quality—is less likely to run short of friends than one who doesn't. And they aren't going to see him as some kind of object either. Quality destroys objectivity every time.”

— Zen and the Art of Motorcycle Maintenance

@spring_io #springio17

Software Testing

With motorcycles, you drive to test them.

With software, you can test it without driving it.

Or rather, you can automate the driving.

If you don’t automate tests, you’re still testing!

@spring_io #springio17@spring_io

#springio17

Unit Test Example

@spring_io #springio17@spring_io

#springio17

bus.spec.ts

@spring_io #springio17@spring_io

#springio17

Jest facebook.github.io/jest

@spring_io #springio17

Action!Don’t be afraid to try new things

Learn JavaScript

Try one of these frameworks

Form your own opinions

Or just wait a few months…

developer.okta.com/blog

@spring_io #springio17

Questions?Keep in touch!

raibledesigns.com

@mraible

Presentations

speakerdeck.com/mraible

Code

github.com/mraible