Front End Development for Back End Developers - Denver Startup Week 2017

Matt Raible | @mraible Front End Development for Back End
Developers September 25, 2017 #DENStartupWeek

TITLE SPONSORS TRACK SPONSORS

HEADLINE SPONSORS PARTNER SPONSORS MEMBER SPONSORS Baker Hostetler Bradford, LTD
Capital One Coastal Cloud Colorado Impact Fund Connect For Health Colorado Cooley Corus360 EKS & H Event Integrity Full Contact Gary Community Investments General Assembly Groundfloor Media / CenterTable Guiceworks ImageSeller Ink Monstr Intelivideo Luna Gourmet Coffee & Tea Nanno Office of Economic Development Pass Gas Denver Slalom Wazee Digital Accenture Bridgepoint Education Butler Snow Delta Tables Hogan Lovells Meyer Law Name.com Slifer Smith & Frampton SoGnar Sounddown Swiftpage The Denver Foundation Zipcar

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

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?

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

My Web Dev Journey

What is modern front end development?

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

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

http://caniuse.com/#search=es5

http://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 https://www.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.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.” https://nodejs.org https://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

https://xkcd.com/303/

Leading JavaScript Frameworks in 2017 angular.io facebook.github.io/react vuejs.org

@spring_io #springio17 Jobs on Indeed September 2017 0 1,750 3,500
5,250 7,000 Angular Aurelia Backbone Ember Knockout React Vue

@spring_io #springio17 Stack Overﬂow Tags September 2017 0 20,000 40,000
60,000 80,000 Angular Aurelia Backbone Knockout Ember React Vue

Stack Overflow Trends https://stackoverflow.blog/2017/05/09/introducing-stack-overflow-trends

@spring_io #springio17 GitHub Stars September 2017 0 20,000 40,000 60,000
80,000 Angular Aurelia Backbone Knockout Ember React Vue

@spring_io #springio17 GitHub Star Growth

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/docs/ts/latest/quickstart.html

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

Get Started with Angular Angular QuickStart https://angular.io/docs/ts/latest/quickstart.html Angular Seed https://github.com/mgechev/angular-seed
Angular Seed Advanced https://github.com/NathanWalker/angular-seed-advanced

Angular and Angular CLI Demos https://github.com/mraible/ng-demo https://youtu.be/Jq3szz2KOOs (Building) https://youtu.be/TksyjxipM4M (Testing)

OpenID Connect https://www.youtube.com/watch?v=Kb56GzQ2pSk

developer.okta.com

Ionic Framework

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

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>

Learning React https://vimeo.com/213710634

Imperative Code if (count > 99) { if (!hasFile()) {
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

Ships with documentation!

Authentication with React

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

Learning Vue.js https://youtu.be/utJGnK9D_UQ

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>

Vue CLI

Authentication with Vue.js

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

CSS Frameworks

Bootstrap 4

CSS Framework Stars on GitHub September 2017 0 30,000 60,000
90,000 120,000 Bootstrap Foundation Pure Skeleton

CSS Framework Star History https://github.com/timqian/star-history

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

HTTP/2 in JHipster /* * Enable HTTP/2 for Undertow -
https://twitter.com/ankinson/status/829256167700492288 * HTTP/2 requires HTTPS, so HTTP requests will fallback to HTTP/1.1. * See the JHipsterProperties class and your application-*.yml configuration files * for more information. */ if (jHipsterProperties.getHttp().getVersion().equals(JHipsterProperties.Http.Version.V_2_0)) { if (container instanceof UndertowEmbeddedServletContainerFactory) { ((UndertowEmbeddedServletContainerFactory) container) .addBuilderCustomizers((builder) -> { builder.setServerOption(UndertowOptions.ENABLE_HTTP2, true); }); } }

HTTP/2 Server Push in Java http://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("<html>" + "<img src='images/kodedu-logo.png'>" + "</html>"); } } }

https://twitter.com/kosamari/status/859958929484337152

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 https://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 Render Pre-cache Lazy-load

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

JHipster jhipster.github.io

Get Started with JHipster 4 Demo

JHipster 4 Tutorials and Videos Monolith https://github.com/mraible/jhipster4-demo Microservices https://developer.okta.com/blog/2017/06/20/develop- microservices-with-jhipster

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

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

#Devoxx4Kids

Software Testing With motorcycles, you drive to test them. With
software, you can test it without driving it. Or rather, you can automate the driving. If you don’t automate tests, you’re still testing!

bus.spec.ts

Jest facebook.github.io/jest

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…

developer.okta.com/blog/

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

Front End Development for Back End Developers -...

Front End Development for Back End Developers - Denver Startup Week 2017

More Decks by Matt Raible

Other Decks in Programming

Featured

Transcript