Slide 1
Slide 1 text
Front End Development for Back End Java Developers
September 10, 2019
Matt Raible | @mraible
Photo by Matt Dean https://www.flickr.com/photos/143733090@N05/32712944625
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
developer.okta.com
Slide 5
Slide 5 text
Authentication Standards
Slide 6
Slide 6 text
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
OAuth 2.0 Overview
Today’s Agenda
JavaScript / TypeScript
Build Tools
JavaScript Frameworks
CSS
Progressive Web Apps
JHipster
Slide 8
Slide 8 text
My Web Dev Journey
Slide 9
Slide 9 text
What is modern front end development?
Slide 10
Slide 10 text
Web Frameworks Over the Years
github.com/mraible/history-of-web-frameworks-timeline
Slide 11
Slide 11 text
JSF
zeroturnaround.com/webframeworksindex
❤
Slide 12
Slide 12 text
JavaScript Framework Explosion
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Let’s do some learning!
Slide 16
Slide 16 text
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 17
Slide 17 text
caniuse.com/#search=es5
Slide 18
Slide 18 text
caniuse.com/#search=es6
Slide 19
Slide 19 text
TypeScript
$ npm install -g typescript
function greeter(person: string) {
return "Hello, " + person;
}
var user = "Jane User";
document.body.innerHTML = greeter(user);
$ tsc greeter.ts
typescriptlang.org/docs/tutorial.html
Slide 20
Slide 20 text
bus.ts
Slide 21
Slide 21 text
TypeScript 2.3+
Slide 22
Slide 22 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’s package ecosystem, npm, is the largest
ecosystem of open source libraries in the world.”
nodejs.org
github.com/creationix/nvm
Slide 23
Slide 23 text
Front End Build Tools
Old School: Gulp
New School: SystemJS
Hip: Webpack
Web Dependencies:
Old School: Bower
New School: npm
Hip: yarn
Slide 24
Slide 24 text
Yeoman
The web's scaffolding tool for modern webapps
Helps you kickstart new projects
Promotes the Yeoman workflow
yeoman.io
Slide 25
Slide 25 text
Browsersync browsersync.io
Slide 26
Slide 26 text
Gulp
gulp.task('serve', function() {
browserSync.init({
server: './app'
});
gulp.watch(['app/**/*.js', 'app/**/*.css', 'app/**/*.html'])
.on('change', browserSync.reload);
});
Slide 27
Slide 27 text
Webpack
Slide 28
Slide 28 text
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'
}
}
...
...
Slide 29
Slide 29 text
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 30
Slide 30 text
webpack.academy
Slide 31
Slide 31 text
xkcd.com/303/
Slide 32
Slide 32 text
Leading JavaScript Frameworks in 2019
angular.io
reactjs.org
vuejs.org
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
“Angular and React dominate:
Nothing else even comes close.”
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
“2018: The Year of React
React won the popularity battle in 2017.”
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
“React kept a firm grip on its lead in 2018.”
Slide 40
Slide 40 text
Crunch the Numbers
Slide 41
Slide 41 text
@spring_io
#springio17
Hot Frameworks hotframeworks.com
Slide 42
Slide 42 text
@spring_io
#springio17
Hot Frameworks hotframeworks.com
Slide 43
Slide 43 text
@spring_io
#springio17
Jobs on Indeed (UK)
September 2019
0
1,000
2,000
3,000
4,000
Vue React Angular
Slide 44
Slide 44 text
@spring_io
#springio17
Jobs on Indeed (US)
September 2019
0
2,750
5,500
8,250
11,000
Vue React Angular
Slide 45
Slide 45 text
@spring_io
#springio17
Stack Overflow Tags
September 2019
0
50,000
100,000
150,000
200,000
Vue React Angular
Slide 46
Slide 46 text
@spring_io
#springio17
GitHub Stars
September 2019
0
40,000
80,000
120,000
160,000
Angular Backbone Knockout Ember Polymer React Vue
Slide 47
Slide 47 text
@spring_io
#springio17
GitHub Star Growth
star-history.t9t.io/#angular/angular&facebook/react&vuejs/vue
Slide 48
Slide 48 text
Hello World with Angular
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
Hello {{name}}
` }) export class AppComponent { name = 'World'; }Slide 49
Slide 49 text
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 50
Slide 50 text
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 51
Slide 51 text
No content
Slide 52
Slide 52 text
Angular CLI
Slide 53
Slide 53 text
Angular CLI
Slide 54
Slide 54 text
Ionic Framework
Slide 55
Slide 55 text
ng-book
A comprehensive guide to developing with
Angular 8
Worth all your hard earned $$$
www.ng-book.com/2
“Thank you for the awesome book. It's the bible
for Angular.” — Vijay Ganta
Slide 56
Slide 56 text
Authentication with Angular
Slide 57
Slide 57 text
Hello World with React
codepen.io/gaearon/pen/ZpvBNJ?editors=0100
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
Slide 58
Slide 58 text
Learning React
vimeo.com/213710634
Slide 59
Slide 59 text
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);
Slide 60
Slide 60 text
Declarative Code
if (count === 0) {
return ;
} else if (count <= 99) {
return (
{count}
);
} else {
return (
99+
);
}
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
Create React App
Slide 63
Slide 63 text
Create React App
Slide 64
Slide 64 text
Authentication with React
Slide 65
Slide 65 text
Hello World with Vue.js
jsfiddle.net/chrisvfritz/50wL7mdz/
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
});
{{ message }}
Slide 66
Slide 66 text
Learning Vue.js
youtu.be/utJGnK9D_UQ
Slide 67
Slide 67 text
Vue.js Code
Click here!
new Vue({
el: '#app',
methods: {
clickedButton: function(event) {
console.log(event);
alert("You clicked the button!");
}
}
});
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
Getting Started
Slide 70
Slide 70 text
Vue CLI
Slide 71
Slide 71 text
Vue CLI
Slide 72
Slide 72 text
Authentication with Vue
Slide 73
Slide 73 text
Server-Side Support
Angular Universal merged into Angular 4
mobile.twitter.com
Nuxt.js
Slide 74
Slide 74 text
Server-Side Java Support
Slide 75
Slide 75 text
Cascading Style Sheets
#app {
background: #eee;
}
.blog-post {
padding: 20px;
}
.blog-post > p:first {
font-weight: 400;
}
img + span.caption {
font-style: italic;
}
Slide 76
Slide 76 text
Sass: Syntactically Awesome Style Sheets
#app {
background: #eee;
.blog-post {
padding: 20px;
> p:first {
font-weight: 400;
}
img + span.caption {
font-style: italic;
}
}
} sass-lang.com
Slide 77
Slide 77 text
CSS Frameworks
Slide 78
Slide 78 text
Bootstrap 4
Slide 79
Slide 79 text
Bootstrap 4
Slide 80
Slide 80 text
CSS Framework Stars on GitHub
September 2019
0
35,000
70,000
105,000
140,000
Bootstrap Foundation Pure Skeleton Angular Material Material UI
Slide 81
Slide 81 text
CSS Framework Star History
star-history.t9t.io
Slide 82
Slide 82 text
Front End Performance Optimization
Reduce HTTP Requests
Gzip HTML, JavaScript, and CSS
Far Future Expires Headers
Code Minification
Optimize Images
Slide 83
Slide 83 text
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 84
Slide 84 text
HTTP/2 Server Push in Java
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 85
Slide 85 text
twitter.com/kosamari/status/859958929484337152
Slide 86
Slide 86 text
twitter.com/kosamari/status/859958929484337152
Slide 87
Slide 87 text
twitter.com/kosamari/status/859958929484337152
Slide 88
Slide 88 text
Chrome Developer Tools
Follow Umar Hansa - @umaar
Follow Addy Osmani - @addyosmani
Slide 89
Slide 89 text
Framework Tools
Angular Augury
React Developer Tools
vue-devtools
Slide 90
Slide 90 text
Progressive Web Apps
Slide 91
Slide 91 text
“We’ve failed on mobile”
— Alex Russell
youtu.be/K1SFnrf4jZo
Slide 92
Slide 92 text
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 93
Slide 93 text
The PRPL Pattern
Push
Render
Pre-cache
Lazy-load
Slide 94
Slide 94 text
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 95
Slide 95 text
Learn More About PWAs
developer.okta.com/blog/2017/07/20/the-ultimate-guide-to-progressive-web-applications
Slide 96
Slide 96 text
“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
Slide 97
Slide 97 text
No content
Slide 98
Slide 98 text
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 99
Slide 99 text
Micro Frontends micro-frontends.org
Slide 100
Slide 100 text
Micro Frontends micro-frontends.org
Slide 101
Slide 101 text
Micro Frontends
martinfowler.com/articles/micro-frontends.html
Slide 102
Slide 102 text
single-spa single-spa.js.org
Slide 103
Slide 103 text
@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! ✨
Slide 104
Slide 104 text
Get Started with JHipster 6 Demo
https://github.com/mraible/jhipster6-demo | https://youtu.be/uQqlO3IGpTU
Slide 105
Slide 105 text
No content
Slide 106
Slide 106 text
JHipster 6 Tutorials and Videos
Monolith
github.com/mraible/jhipster6-demo
Microservices
developer.okta.com/blog/2019/05/23/java-
microservices-spring-cloud-config
Slide 107
Slide 107 text
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
Slide 108
Slide 108 text
What You Learned
ES6 and TypeScript
Node.js and nvm
Angular, React, and Vue
CSS and Sass
Front End Performance Optimization
Progressive Web Apps
Slide 109
Slide 109 text
TRY
Slide 110
Slide 110 text
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…
Slide 111
Slide 111 text
No content
Slide 112
Slide 112 text
developer.okta.com/blog
@oktadev
Slide 113
Slide 113 text
Questions?
Keep in touch!
raibledesigns.com
@mraible
Presentations
speakerdeck.com/mraible
Code
github.com/oktadeveloper
Slide 114
Slide 114 text
developer.okta.com