Front Ends for Back End Developers - Spring I/O 2017

@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 Lover
Okta 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?

@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
TSES7ES6ES5

@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
eﬃcient. 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 Tools
Old School: Gulp

New School: SystemJS

Hip: Webpack

Web Dependencies:

Old School: Bower

New School: npm

Hip: yarn

@spring_io
#springio17
Yeoman
The web's scaﬀolding tool for modern webapps

Helps you kickstart new projects

Promotes the Yeoman workﬂow
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.conﬁg.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 Features
webpack-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 workﬂow

iamakulov.com/pages/webpack

@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 Indeed
May 2017
0
2,000
4,000
6,000
8,000
Angular Aurelia Backbone Ember Knockout React Vue

@spring_io
#springio17
@spring_io
#springio17
Stack Overﬂow 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 Stars
May 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
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 { }

@spring_io
#springio17
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
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 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

@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 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);

@spring_io
#springio17
Declarative Code
if (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
@spring_io
#springio17
Ships with documentation!

@spring_io
#springio17
Hello World with Vue.js
https://jsﬁddle.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
@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
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 Miniﬁcation

Optimize Images

@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

@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 Russell

https://youtu.be/K1SFnrf4jZo

@spring_io
#springio17
Mobile Hates You!
How to ﬁght 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

@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 Misconﬁguration

6. Sensitive Data Exposure

7. Insuﬃcient 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-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

@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
Quality
“A person who knows how to ﬁx 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…

@spring_io
#springio17
Questions?
Keep in touch!

raibledesigns.com

@mraible

Presentations

speakerdeck.com/mraible

Code

github.com/mraible

Front Ends for Back End Developers - Spring I/O 2017

More Related Content

What's hot

Similar to Front Ends for Back End Developers - Spring I/O 2017

More from Matt Raible

Recently uploaded

Front Ends for Back End Developers - Spring I/O 2017