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

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 of the trade for fronted development (npm, yarn, Gulp, Webpack, Yeoman) and learn the basics of HTML, CSS, and JavaScript. I'll dive into the intricacies of Bootstrap, Material Design, ES6, and TypeScript. Finally, after getting you up to speed with all this new tech, I'll show how it can all be found and integrated through the fine and dandy JHipster project.

Transcript

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

   View Slide

2. TITLE SPONSORS
   TRACK SPONSORS
   

   View Slide

3. 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
   

   View Slide

4. 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
   

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. Authentication Standards
   

   View Slide

9. 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?
   

   View Slide

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

    View Slide

11. My Web Dev Journey
    

    View Slide

12. What is modern front end development?
    

    View Slide

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

    View Slide

14. JavaScript Framework Explosion
    

    View Slide

15. View Slide

16. View Slide

17. Let’s do some learning!
    

    View Slide

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

    View Slide

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

    View Slide

20. http://caniuse.com/#search=es6
    

    View Slide

21. 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
    

    View Slide

22. bus.ts
    

    View Slide

23. TypeScript 2.3
    

    View Slide

24. “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
    

    View Slide

25. Front End Build Tools
    Old School: Gulp
    
    New School: SystemJS
    
    Hip: Webpack
    
    Web Dependencies:
    
    Old School: Bower
    
    New School: npm
    
    Hip: yarn
    

    View Slide

26. Yeoman
    The web's scaffolding tool for modern webapps
    
    Helps you kickstart new projects
    
    Promotes the Yeoman workflow
    yeoman.io
    

    View Slide

27. Browsersync browsersync.io
    

    View Slide

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

    View Slide

29. Webpack
    

    View Slide

30. 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'
    }
    }
    
    
    
    ...
    
    
    ...
    
    
    
    

    View Slide

31. webpack.config.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']
    }
    }
    ]
    }
    };
    

    View Slide

32. webpack.academy
    

    View Slide

33. https://xkcd.com/303/
    

    View Slide

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

    View Slide

35. View Slide

36. View Slide

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

    View Slide

38. @spring_io
    #springio17
    Stack Overflow Tags
    September 2017
    0
    20,000
    40,000
    60,000
    80,000
    Angular Aurelia Backbone Knockout Ember React Vue
    

    View Slide

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

    View Slide

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

    View Slide

41. @spring_io
    #springio17
    GitHub Star Growth
    

    View Slide

42. Hello World with Angular
    import { Component } from '@angular/core';
    @Component({
    selector: 'my-app',
    template: `Hello {{name}}`
    })
    export class AppComponent {
    name = 'World';
    }
    
    https://angular.io/docs/ts/latest/quickstart.html
    

    View Slide

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

    View Slide

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

    View Slide

45. View Slide

46. Angular CLI
    

    View Slide

47. Angular CLI
    

    View Slide

48. View Slide

49. 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
    

    View Slide

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

    View Slide

51. View Slide

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

    View Slide

53. developer.okta.com
    

    View Slide

54. developer.okta.com
    

    View Slide

55. Ionic Framework
    

    View Slide

56. 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
    

    View Slide

57. Hello World with React
    http://codepen.io/gaearon/pen/ZpvBNJ?editors=0100
    
    <br/>ReactDOM.render(<br/><h1>Hello, world!</h1>,<br/>document.getElementById('root')<br/>);<br/>
    

    View Slide

58. Learning React
    https://vimeo.com/213710634
    

    View Slide

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

    View Slide

60. Declarative Code
    if (count === 0) {
    return ;
    } else if (count <= 99) {
    return (
    
    {count}
    
    );
    } else {
    return (
    
    99+
    
    );
    }
    

    View Slide

61. View Slide

62. Create React App
    

    View Slide

63. Create React App
    

    View Slide

64. Ships with documentation!
    

    View Slide

65. Authentication with React
    

    View Slide

66. Hello World with Vue.js
    https://jsfiddle.net/chrisvfritz/50wL7mdz/
    
    {{ message }}
    
    <br/>new Vue({<br/>el: '#app',<br/>data: {<br/>message: 'Hello Vue.js!'<br/>}<br/>});<br/>
    

    View Slide

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

    View Slide

68. Vue.js Code
    
    
    Click here!
    
    <br/>new Vue({<br/>el: '#app',<br/>methods: {<br/>clickedButton: function(event) {<br/>console.log(event);<br/>alert("You clicked the button!");<br/>}<br/>}<br/>});<br/>
    

    View Slide

69. View Slide

70. Vue CLI
    

    View Slide

71. Vue CLI
    

    View Slide

72. Authentication with Vue.js
    

    View Slide

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

    View Slide

74. Server-Side Java Support
    

    View Slide

75. Cascading Style Sheets
    #app {
    background: #eee;
    }
    .blog-post {
    padding: 20px;
    }
    .blog-post > p:first {
    font-weight: 400;
    }
    img + span.caption {
    font-style: italic;
    }
    

    View Slide

76. 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
    

    View Slide

77. CSS Frameworks
    

    View Slide

78. Bootstrap 4
    

    View Slide

79. Bootstrap 4
    

    View Slide

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

    View Slide

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

    View Slide

82. Front End Performance Optimization
    Reduce HTTP Requests
    
    Gzip HTML, JavaScript, and CSS
    
    Far Future Expires Headers
    
    Code Minification
    
    Optimize Images
    

    View Slide

83. 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
    

    View Slide

84. 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);
    });
    }
    }
    

    View Slide

85. View Slide

86. 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("" +
    "" +
    "");
    }
    }
    }
    

    View Slide

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

    View Slide

88. View Slide

89. View Slide

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

    View Slide

91. Framework Tools
    Angular Augury
    React Developer Tools
    vue-devtools
    

    View Slide

92. Progressive Web Apps
    

    View Slide

93. View Slide

94. “We’ve failed on mobile”
    
    — Alex Russell
    
    https://youtu.be/K1SFnrf4jZo
    

    View Slide

95. 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
    

    View Slide

96. The PRPL Pattern
    Push
    
    Render
    
    Pre-cache
    
    Lazy-load
    

    View Slide

97. 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
    

    View Slide

98. View Slide

99. “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
    

    View Slide

100. View Slide

101. Security: OWASP Top 10
     1. Injection
     
     2. Broken Auth & Session Mgmt
     
     3. Cross-Site Scripting (XSS)
     
     4. Broken Access Control
     
     5. Security Misconfiguration
     
     6. Sensitive Data Exposure
     
     7. Insufficient Attack Protection
     
     8. Cross-Site Request Forgery
     
     9. Components w/ Vulnerabilities
     
     10. Underprotected APIs
     

     View Slide

102. JHipster jhipster.github.io
     

     View Slide

103. Get Started with JHipster 4 Demo
     

     View Slide

104. View Slide

105. 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
     

     View Slide

106. 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
     

     View Slide

107. 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
     

     View Slide

108. Try
     

     View Slide

109. #Devoxx4Kids
     

     View Slide

110. 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!
     

     View Slide

111. bus.spec.ts
     

     View Slide

112. Jest facebook.github.io/jest
     

     View Slide

113. 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…
     

     View Slide

114. View Slide

115. developer.okta.com/blog/
     

     View Slide

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

     View Slide