@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.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@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
@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
@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
#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