Front End Development for Back End Java Developers - Jfokus 2020

Front End Development for Back End Java Developers February 4,
2020 Matt Raible | @mraible Photo by Magnus Johansson flickr.com/photos/120374925@N06/15885090329

OAuth 2.0 Overview Today’s Agenda JavaScript / TypeScript Build Tools
JavaScript Frameworks CSS Front End Performance Progressive Web Apps

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

developer.okta.com

Authentication Standards

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?

My Web Dev Journey

What is modern front end development?

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

JSF zeroturnaround.com/webframeworksindex ❤

JavaScript Framework Explosion

Let’s do some learning!

ES6, ES7 and TypeScript ES5: es5.github.io ES6: git.io/es6features ES7: bit.ly/es7features
TS: www.typescriptlang.org TS ES7 ES6 ES5

caniuse.com/#search=es5

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 typescriptlang.org/docs/tutorial.html

bus.ts

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’s package ecosystem, npm, is the largest ecosystem of open source libraries in the world.” nodejs.org 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

Browsersync browsersync.io

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

Webpack

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

webpack.academy

xkcd.com/303/

Leading JavaScript Frameworks in 2020 angular.io reactjs.org 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.”

“React Dominated 2019, and Will Probably Dominate 2020”

Crunch the Numbers

@spring_io #springio17 Hot Frameworks hotframeworks.com

@spring_io #springio17 Jobs on Indeed (Sweden) February 2020 0 175
350 525 700 Vue React Angular

@spring_io #springio17 Jobs on Indeed (US) February 2020 0 2,750
5,500 8,250 11,000 Vue React Angular

@spring_io #springio17 Stack Overﬂow Tags February 2020 0 55,000 110,000
165,000 220,000 Vue React Angular

@spring_io #springio17 GitHub Stars February 2020 0 40,000 80,000 120,000
160,000 Vue React Angular Svelte

@spring_io #springio17 GitHub Star Growth star-history.t9t.io/#angular/angular&facebook/react&vuejs/vue

@spring_io #springio17 GitHub Star Growth star-history.t9t.io/#angular/angular&facebook/react&vuejs/vue&sveltejs/svelte

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>

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

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

Angular CLI

Ionic Framework

ng-book A comprehensive guide to developing with Angular 8 Worth
all your hard earned $$$ newline.co/ng-book/2 “Thank you for the awesome book. It's the bible for Angular.” — Vijay Ganta

Authentication with Angular

Hello World with React codepen.io/gaearon/pen/ZpvBNJ?editors=0100 <div id="root"></div> <script> ReactDOM.render( <h1>Hello,
world!</h1>, document.getElementById('root') ); </script>

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

Create React App

Authentication with React

Hello World with Vue.js jsﬁddle.net/chrisvfritz/50wL7mdz/ <div id="app"> <p>{{ message }}</p>
</div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }); </script>

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>

Getting Started

Vue CLI

Authentication with Vue

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

Server-Side Java Support

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; } } } sass-lang.com

CSS Frameworks

Bootstrap 4

CSS Framework Stars on GitHub February 2020 0 35,000 70,000
105,000 140,000 Bootstrap Foundation Pure Skeleton Angular Material Material UI Tailwind CSS

CSS Framework Star History star-history.t9t.io

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

Front-End Performance Checklist 2020 smashingmagazine.com/2020/01/front-end-performance-checklist-2020-pdf-pages

Chrome Developer Tools Follow Umar Hansa - @umaar Follow Addy
Osmani - @addyosmani

Framework Tools Angular Augury React Developer Tools vue-devtools

Progressive Web Apps

“We’ve failed on mobile” — Alex Russell 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 critical resources for the initial URL
route Render initial route Pre-cache remaining routes Lazy-load and create remaining routes on demand

“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

Micro Frontends micro-frontends.org

Micro Frontends martinfowler.com/articles/micro-frontends.html

single-spa single-spa.js.org

@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 6 Demo github.com/mraible/jhipster6-demo | youtu.be/uQqlO3IGpTU

JHipster 6 Tutorials and Videos Monolith github.com/mraible/jhipster6-demo Microservices developer.okta.com/blog/2019/05/23/java- microservices-spring-cloud-conﬁg

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

developer.okta.com/blog @oktadev

Questions? Keep in touch! raibledesigns.com @mraible Presentations speakerdeck.com/mraible Code github.com/oktadeveloper

developer.okta.com

Front End Development for Back End Java Develop...

Front End Development for Back End Java Developers - Jfokus 2020

More Decks by Matt Raible

Other Decks in Programming

Featured

Transcript