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