Are you a backend Java developer that's being pushed into front-end development? Are you frustrated with all the JavaScript frameworks and build tools you have to learn to be a good UI developer? If so, this session is for you! We'll explore the landscape of UI development, including web standards, frameworks, and what’s on the horizon (e.g., micro frontends).
Front End Development for Back End Java Developers - South West Java 2019
1. Front End Development for Back End Java Developers
September 3, 2019
Matt Raible · @mraible
Photo by Gerry Fox https://www.flickr.com/photos/gerryfox/34892702975
2. 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
7. 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
49. 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>
50. 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 { }
51. 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);
56. 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
83. Front End Performance Optimization
Reduce HTTP Requests
Gzip HTML, JavaScript, and CSS
Far Future Expires Headers
Code Minification
Optimize Images
84. 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
93. 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
95. 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
96. Learn More About PWAs
developer.okta.com/blog/2017/07/20/the-ultimate-guide-to-progressive-web-applications
97. “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
108. 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
109. What You Learned
ES6 and TypeScript
Node.js and nvm
Angular, React, and Vue
CSS and Sass
Front End Performance Optimization
Progressive Web Apps
111. 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…