Front End Development for Backend Developers - GIDS 2019

Front End Development for Back End Developers
April 22, 2019 #gids19
Matt Raible · @mraible
Photo by Spiros Vathis https://www.ﬂickr.com/photos/vathis/8649808366

Blogger on raibledesigns.com and

developer.okta.com/blog
Web Developer and Java Champion
Father, Skier, Mountain Biker,
Whitewater Rafter
Open Source Developer + User
Who is Matt Raible?
Bus Lover
Okta Developer Advocate

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?

OAuth 2.0 Overview
Today’s Agenda
JavaScript / TypeScript

Build Tools

JavaScript Frameworks

CSS

Progressive Web Apps

JHipster

What is modern front end development?

Web Frameworks Over the Years
https://github.com/mraible/history-of-web-frameworks-timeline

JSF
https://zeroturnaround.com/webframeworksindex
❤

JavaScript Framework Explosion

ES6, ES7 and TypeScript
ES5: es5.github.io

ES6: git.io/es6features

ES7: bit.ly/es7features

TS: www.typescriptlang.org
TSES7ES6ES5

http://caniuse.com/#search=es5

http://caniuse.com/#search=es6

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

“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’s package ecosystem, npm, is the largest
ecosystem of open source libraries in the world.”
https://nodejs.org
https://github.com/creationix/nvm

Front End Build Tools
Old School: Gulp

New School: SystemJS

Hip: Webpack

Web Dependencies:

Old School: Bower

New School: npm

Hip: yarn

Yeoman
The web's scaﬀolding tool for modern webapps

Helps you kickstart new projects

Promotes the Yeoman workﬂow
yeoman.io

Gulp
gulp.task('serve', function() {
browserSync.init({
server: './app'
});
gulp.watch(['app/**/*.js', 'app/**/*.css', 'app/**/*.html'])
.on('change', browserSync.reload);
});

Write and Bundle
// bar.js
export default function bar() {
// code here
}
// app.js
import bar from './bar';
bar();
// webpack.config.js
module.exports = {
entry: './app.js',
output: {
filename: 'bundle.js'
}
}

<html>
<head>
...
</head>
<body>
...
<script src="bundle.js"></script>
</body>
</html>

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']
}
}
]
}
};

Leading JavaScript Frameworks in 2019
angular.io
facebook.github.io/react
vuejs.org

“Angular and React dominate:
Nothing else even comes close.”

“2018: The Year of React
React won the popularity battle in 2017.”

“React kept a ﬁrm grip on its lead in 2018.”

@spring_io
#springio17
Hot Frameworks hotframeworks.com

@spring_io
#springio17
Jobs on Indeed (US)
April 2019
0
2,500
5,000
7,500
10,000
Vue React Angular

@spring_io
#springio17
Stack Overﬂow Tags
April 2019
0
45,000
90,000
135,000
180,000
Vue React Angular

@spring_io
#springio17
GitHub Stars
April 2019
0
35,000
70,000
105,000
140,000
Angular Backbone Knockout Ember Polymer React Vue

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>

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 { }

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

ng-book
A comprehensive guide to developing with
Angular 7

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

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>

Learning React
https://vimeo.com/213710634

Imperative Code
if (count > 99) {
if (!hasFire()) {
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);

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

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>

Learning Vue.js
https://youtu.be/utJGnK9D_UQ

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>

Server-Side Support
Angular Universal merged into Angular 4
mobile.twitter.com
Nuxt.js

Cascading Style Sheets
#app {
background: #eee;
}
.blog-post {
padding: 20px;
}
.blog-post > p:first {
font-weight: 400;
}
img + span.caption {
font-style: italic;
}

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

CSS Framework Stars on GitHub
April 2019
0
35,000
70,000
105,000
140,000
Bootstrap Foundation Pure Skeleton Material Components

CSS Framework Star History
https://github.com/timqian/star-history

Front End Performance Optimization
Reduce HTTP Requests

Gzip HTML, JavaScript, and CSS

Far Future Expires Headers

Code Miniﬁcation

Optimize Images

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

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

Chrome Developer Tools
Follow Umar Hansa - @umaar

Follow Addy Osmani - @addyosmani

Framework Tools
Angular Augury
React Developer Tools
vue-devtools

“We’ve failed on mobile”

— Alex Russell

https://youtu.be/K1SFnrf4jZo

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

The PRPL Pattern
Push

Render

Pre-cache

Lazy-load

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

Learn More about PWAs
https://developer.okta.com/blog/2017/07/20/the-ultimate-guide-to-progressive-web-applications

“Reusable UI widgets created using open web technology.” - MDN

Web Components consists of four technologies:

Custom Elements

HTML Templates

Shadow DOM

HTML Imports
Web Components
https://www.polymer-project.org
https://stenciljs.com
https://www.webcomponents.org

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
JHipster jhipster.tech
JHipster is a development platform to generate, develop and deploy
Spring Boot + Angular/React Web applications and Spring microservices.
and Vue! ✨

Get Started with JHipster 5 Demo
https://github.com/mraible/jhipster5-demo | https://youtu.be/-VQ_SVkaXbs

JHipster 5 Tutorials and Videos
Monolith

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

Microservices

https://developer.okta.com/blog/2018/03/01/develop-
microservices-jhipster-oauth

The JHipster Mini-Book
Written with Asciidoctor

Quick and to the point, 164 pages

Developed a real world app:

www.21-points.com

Free Download from

infoq.com/minibooks/jhipster-mini-book
@jhipster_book

What You Learned
ES6 and TypeScript

Node.js and nvm

Angular, React, and Vue

CSS and Sass

Front End Performance Optimization

Progressive Web Apps

Action!
Don’t be afraid to try new things

Learn JavaScript or TypeScript

Try one of these frameworks

Form your own opinions

Or just wait a few months…

Questions?
Keep in touch!

raibledesigns.com

@mraible

Presentations

speakerdeck.com/mraible

Code

github.com/oktadeveloper

Front End Development for Backend Developers - GIDS 2019

More Related Content

What's hot

Similar to Front End Development for Backend Developers - GIDS 2019

More from Matt Raible

Recently uploaded

Front End Development for Backend Developers - GIDS 2019