Are you a backend developer that’s being pushed into front-end development? Are you frustrated with all 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 tools for frontend development and frameworks too!
Streamed live at 8pm MST on Oct 25, 2017! https://virtualjug.com/vjug24/
SensoDat: Simulation-based Sensor Dataset of Self-driving Cars
Front End Development for Back End Developers - vJUG24 2017
1. Front End Development for Back End Developers
October 25, 2017 #vjug24
Matt Raible · @mraible
2. Blogger on raibledesigns.com
Web Developer and Java Champion
Father, Skier, Mountain Biker,
Whitewater Rafter
Open Source Connoisseur
Who is Matt Raible?
Bus Lover
Okta Developer Advocate
22. “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.js' package ecosystem, npm, is the
largest ecosystem of open source libraries in the world.”
https://nodejs.org
https://github.com/creationix/nvm
23. Front End Build Tools
Old School: Gulp
New School: SystemJS
Hip: Webpack
Web Dependencies:
Old School: Bower
New School: npm
Hip: yarn
24. Yeoman
The web's scaffolding tool for modern webapps
Helps you kickstart new projects
Promotes the Yeoman workflow
yeoman.io
40. 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>
https://angular.io/guide/quickstart
41. 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 { }
42. 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);
47. Get Started with Angular
Angular QuickStart
https://angular.io/guide/quickstart
Angular Seed
https://github.com/mgechev/angular-seed
Angular Seed Advanced
https://github.com/NathanWalker/angular-seed-advanced
54. ng-book 2
A comprehensive guide to developing with
Angular 4
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
55. 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>
80. Front End Performance Optimization
Reduce HTTP Requests
Gzip HTML, JavaScript, and CSS
Far Future Expires Headers
Code Minification
Optimize Images
81. 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
85. “We’ve failed on mobile”
— Alex Russell
https://youtu.be/K1SFnrf4jZo
86. 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
88. 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
89.
90. “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
97. The JHipster Mini-Book
Written with Asciidoctor
Quick and to the point, 130 pages
Developed a real world app:
www.21-points.com
Free Download from
infoq.com/minibooks/jhipster-4-mini-book
@jhipster_book
99. What You Learned
ES6 and TypeScript
Node.js and nvm
Angular, React, and Vue.js
CSS and Sass
Front End Performance Optimization
Progressive Web Apps
101. 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…