Slide 1
Slide 1 text
Matt Raible • @mraible
Front End Development for Back End Developers
Slide 2
Slide 2 text
Blogger on raibledesigns.com
Web Developer and Java Champion
Father, Skier, Mountain Biker,
Whitewater Rafter
Open Source Connoisseur
Who is Matt Raible?
Bus Lover
Okta Developer Advocate
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
#DevoxxUK
Authentication Standards
Slide 6
Slide 6 text
#DevoxxUK
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?
Slide 7
Slide 7 text
My Web Dev Journey
Slide 8
Slide 8 text
#DevoxxUK
What is modern front end development?
Slide 9
Slide 9 text
#DevoxxUK
Web Frameworks Over the Years
https://github.com/mraible/history-of-web-frameworks-timeline
Slide 10
Slide 10 text
#DevoxxUK
JavaScript Framework Explosion
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
#DevoxxUK
Let’s do some learning!
Slide 14
Slide 14 text
#DevoxxUK
ES6, ES7 and TypeScript
ES5: es5.github.io
ES6: git.io/es6features
ES7: bit.ly/es7features
TS: www.typescriptlang.org
TS
ES7
ES6
ES5
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
#DevoxxUK
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
Slide 18
Slide 18 text
#DevoxxUK
bus.ts
Slide 19
Slide 19 text
#DevoxxUK
TypeScript 2.3
Slide 20
Slide 20 text
“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
Slide 21
Slide 21 text
#DevoxxUK
Front End Build Tools
Old School: Gulp
New School: SystemJS
Hip: Webpack
Web Dependencies:
Old School: Bower
New School: npm
Hip: yarn
Slide 22
Slide 22 text
#DevoxxUK
Yeoman
The web's scaffolding tool for modern webapps
Helps you kickstart new projects
Promotes the Yeoman workflow
yeoman.io
Slide 23
Slide 23 text
#DevoxxUK
Browsersync browsersync.io
Slide 24
Slide 24 text
#DevoxxUK
Gulp
gulp.task('serve', function() {
browserSync.init({
server: './app'
});
gulp.watch(['app/**/*.js', 'app/**/*.css', 'app/**/*.html'])
.on('change', browserSync.reload);
});
Slide 25
Slide 25 text
#DevoxxUK
Webpack
Slide 26
Slide 26 text
#DevoxxUK
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']
}
}
]
}
};
Slide 27
Slide 27 text
#DevoxxUK
Cool Webpack Features
webpack-bundle-analyzer
webpack-dashboard
Slide 28
Slide 28 text
#DevoxxUK
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
Slide 29
Slide 29 text
https://xkcd.com/303/
Slide 30
Slide 30 text
#DevoxxUK
Leading JavaScript Frameworks in 2017
angular.io
facebook.github.io/react
vuejs.org
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
#DevoxxUK
Jobs on Indeed
May 2017
0
2,000
4,000
6,000
8,000
Angular Aurelia Backbone Ember Knockout React Vue
Slide 34
Slide 34 text
#DevoxxUK
Stack Overflow Tags
May 2017
0
12,500
25,000
37,500
50,000
Angular Aurelia Backbone Knockout Ember React Vue
Slide 35
Slide 35 text
#DevoxxUK
GitHub Stars
May 2017
0
17,500
35,000
52,500
70,000
Angular Aurelia Backbone Knockout Ember React Vue
Slide 36
Slide 36 text
#DevoxxUK
Hello World with Angular
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
Hello {{name}}
` }) export class AppComponent { name = 'World'; } https://angular.io/docs/ts/latest/quickstart.htmlSlide 37
Slide 37 text
#DevoxxUK
Hello World with Angular
import { 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 { }
Slide 38
Slide 38 text
#DevoxxUK
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);
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
#DevoxxUK
Angular CLI
Slide 41
Slide 41 text
#DevoxxUK
Angular CLI
Slide 42
Slide 42 text
#DevoxxUK
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
Slide 43
Slide 43 text
#DevoxxUK
Angular and Angular CLI Demos
https://github.com/mraible/ng-demo
https://youtu.be/Jq3szz2KOOs
(Building)
https://youtu.be/TksyjxipM4M
(Testing)
Slide 44
Slide 44 text
#DevoxxUK
Authentication with OpenID Connect
http://developer.okta.com
http://bit.ly/ng-okta
youtube.com/watch?v=Kb56GzQ2pSk
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
#DevoxxUK
ng-book 2
A 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
Slide 47
Slide 47 text
#DevoxxUK
Hello World with React
http://codepen.io/gaearon/pen/ZpvBNJ?editors=0100
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
Slide 48
Slide 48 text
#DevoxxUK
Learning React
https://vimeo.com/213710634
Slide 49
Slide 49 text
#DevoxxUK
Imperative Code
if (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);
Slide 50
Slide 50 text
#DevoxxUK
Declarative Code
if (count === 0) {
return ;
} else if (count <= 99) {
return (
{count}
);
} else {
return (
99+
);
}
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
#DevoxxUK
Create React App
Slide 53
Slide 53 text
#DevoxxUK
Create React App
Slide 54
Slide 54 text
#DevoxxUK
Ships with documentation!
Slide 55
Slide 55 text
#DevoxxUK
Hello World with Vue.js
https://jsfiddle.net/chrisvfritz/50wL7mdz/
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
});
{{ message }}
Slide 56
Slide 56 text
#DevoxxUK
Learning Vue.js
https://youtu.be/utJGnK9D_UQ
Slide 57
Slide 57 text
#DevoxxUK
Vue.js Code
Click here!
new Vue({
el: '#app',
methods: {
clickedButton: function(event) {
console.log(event);
alert("You clicked the button!");
}
}
});
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
#DevoxxUK
Vue CLI
Slide 60
Slide 60 text
#DevoxxUK
Vue CLI
Slide 61
Slide 61 text
#DevoxxUK
Server-Side Support
Angular Universal merged into Angular 4
mobile.twitter.com
Nuxt.js
Slide 62
Slide 62 text
#DevoxxUK
Server-Side Java Support
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
#DevoxxUK
Cascading Style Sheets
#app {
background: #eee;
}
.blog-post {
padding: 20px;
}
.blog-post > p:first {
font-weight: 400;
}
img + span.caption {
font-style: italic;
}
Slide 66
Slide 66 text
#DevoxxUK
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
Slide 67
Slide 67 text
#DevoxxUK
CSS Frameworks
Slide 68
Slide 68 text
#DevoxxUK
Bootstrap 4
Slide 69
Slide 69 text
#DevoxxUK
Bootstrap 4
Slide 70
Slide 70 text
#DevoxxUK
CSS Framework Stars on GitHub
May 2017
0
30,000
60,000
90,000
120,000
Bootstrap Foundation Pure Skeleton
Slide 71
Slide 71 text
#DevoxxUK
Front End Performance Optimization
Reduce HTTP Requests
Gzip HTML, JavaScript, and CSS
Far Future Expires Headers
Code Minification
Optimize Images
Slide 72
Slide 72 text
#DevoxxUK
HTTP/2
Binary, 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
Slide 73
Slide 73 text
#DevoxxUK
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);
});
}
}
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
#DevoxxUK
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("" +
"
" +
"");
}
}
}
" +
"");
}
}
}
Slide 76
Slide 76 text
https://twitter.com/kosamari/status/859958929484337152
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
No content
Slide 79
Slide 79 text
#DevoxxUK
Chrome Developer Tools
Follow Umar Hansa - @umaar
Follow Addy Osmani - @addyosmani
Slide 80
Slide 80 text
#DevoxxUK
Progressive Web Apps
Slide 81
Slide 81 text
No content
Slide 82
Slide 82 text
“We’ve failed on mobile”
— Alex Russell
https://youtu.be/K1SFnrf4jZo
Slide 83
Slide 83 text
#DevoxxUK
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
Slide 84
Slide 84 text
#DevoxxUK
The PRPL Pattern
Push
Render
Pre-cache
Lazy-load
Slide 85
Slide 85 text
#DevoxxUK
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
Slide 86
Slide 86 text
developer.okta.com/blog
Slide 87
Slide 87 text
#DevoxxUK
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
Slide 88
Slide 88 text
#DevoxxUK
JHipster jhipster.github.io
Slide 89
Slide 89 text
No content
Slide 90
Slide 90 text
#DevoxxUK
The JHipster Mini-Book
2.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
Slide 91
Slide 91 text
#DevoxxUK
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
Slide 92
Slide 92 text
#DevoxxUK
Try
Slide 93
Slide 93 text
#Devoxx4Kids
Slide 94
Slide 94 text
#DevoxxUK
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
Slide 95
Slide 95 text
#DevoxxUK
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!
Slide 96
Slide 96 text
#DevoxxUK
Unit Test Example
Slide 97
Slide 97 text
#DevoxxUK
bus.spec.ts
Slide 98
Slide 98 text
#DevoxxUK
Jest facebook.github.io/jest
Slide 99
Slide 99 text
#DevoxxUK
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…
Slide 100
Slide 100 text
No content
Slide 101
Slide 101 text
developer.okta.com/blog
Slide 102
Slide 102 text
#DevoxxUK
Questions?
Keep in touch!
raibledesigns.com
@mraible
Presentations
speakerdeck.com/mraible
Code
github.com/mraible