The document is a presentation about front end development for back end Java developers. It discusses topics like JavaScript, TypeScript, build tools, CSS frameworks, front end performance, and progressive web apps. It also provides introductions and comparisons of popular JavaScript frameworks like Angular, React, and Vue. The presentation encourages attendees to learn new front end skills and try building something with a front end framework.
Unveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
Front End Development for Back End Java Developers - Jfokus 2020
1. Front End Development for Back End Java Developers
February 4, 2020
Matt Raible | @mraible
Photo by Magnus Johansson flickr.com/photos/120374925@N06/15885090329
2. OAuth 2.0 Overview
Today’s Agenda
JavaScript / TypeScript
Build Tools
JavaScript Frameworks
CSS
Front End Performance
Progressive Web Apps
3. 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
8. 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?
23. “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
24. Front End Build Tools
Old School: Gulp
New School: SystemJS
Hip: Webpack
Web Dependencies:
Old School: Bower
New School: npm
Hip: yarn
25. Yeoman
The web's scaffolding tool for modern webapps
Helps you kickstart new projects
Promotes the Yeoman workflow
yeoman.io
52. 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>
53. 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 { }
54. 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);
59. 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
83. 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
85. Front End Performance Optimization
Reduce HTTP Requests
Gzip HTML, JavaScript, and CSS
Far Future Expires Headers
Code Minification
Optimize Images
86. 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
92. 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
93. 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
94. “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
105. 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
106. What You Learned
ES6 and TypeScript
Node.js and nvm
Angular, React, and Vue
CSS and Sass
Front End Performance Optimization
Progressive Web Apps