Front End Development for Back End Developers - UberConf 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 frontend development (npm, yarn, Gulp, Webpack, Yeoman) and learn the basics of HTML, CSS, and JavaScript.

This presentation dives 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
   July 21, 2017 #UberConf17
   

   View Slide

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
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. Authentication Standards
   

   View Slide

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?
   

   View Slide

8. My Web Dev Journey
   

   View Slide

9. What is modern front end development?
   

   View Slide

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

    View Slide

11. JSF
    https://zeroturnaround.com/webframeworksindex
    ❤
    

    View Slide

12. JavaScript Framework Explosion
    

    View Slide

13. View Slide

14. View Slide

15. Let’s do some learning!
    

    View Slide

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

17. View Slide

18. View Slide

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

20. bus.ts
    

    View Slide

21. TypeScript 2.3
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

25. Browsersync browsersync.io
    

    View Slide

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

    View Slide

27. Webpack
    

    View Slide

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

29. Cool Webpack Features
    webpack-bundle-analyzer
    webpack-dashboard
    

    View Slide

30. webpack for real tasks
    Building front-end and adding compilation
    
    Decreasing front-end size and improving assets caching
    
    Speeding up build and improving the development workflow
    
    iamakulov.com/pages/webpack
    

    View Slide

31. https://xkcd.com/303/
    

    View Slide

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

    View Slide

33. View Slide

34. View Slide

35. Jobs on Indeed
    July 21, 2017
    0
    2,000
    4,000
    6,000
    8,000
    Angular Aurelia Backbone Ember Knockout React Vue
    

    View Slide

36. Stack Overflow Tags
    July 21, 2017
    0
    17,500
    35,000
    52,500
    70,000
    Angular Aurelia Backbone Knockout Ember React Vue
    

    View Slide

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

    View Slide

38. GitHub Stars
    July 21, 2017
    0
    20,000
    40,000
    60,000
    80,000
    Angular Aurelia Backbone Knockout Ember React Vue
    

    View Slide

39. GitHub Star History
    https://github.com/timqian/star-history
    

    View Slide

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

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

    View Slide

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

    View Slide

43. View Slide

44. Angular CLI
    

    View Slide

45. Angular CLI
    

    View Slide

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

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

    View Slide

48. Authentication with OpenID Connect
    http://developer.okta.com
    
    http://bit.ly/ng-okta
    
    youtube.com/watch?v=Kb56GzQ2pSk
    

    View Slide

49. View Slide

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

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

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

    View Slide

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

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

    View Slide

55. View Slide

56. Create React App
    

    View Slide

57. Create React App
    

    View Slide

58. Ships with documentation!
    

    View Slide

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

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

    View Slide

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

62. View Slide

63. Vue CLI
    

    View Slide

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

    View Slide

65. Server-Side Java Support
    

    View Slide

66. View Slide

67. View Slide

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

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

70. CSS Frameworks
    

    View Slide

71. Bootstrap 4
    

    View Slide

72. Bootstrap 4
    

    View Slide

73. CSS Framework Stars on GitHub
    July 21, 2017
    0
    30,000
    60,000
    90,000
    120,000
    Bootstrap Foundation Pure Skeleton
    

    View Slide

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

    View Slide

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

    View Slide

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

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

78. View Slide

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

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

    View Slide

81. View Slide

82. View Slide

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

    View Slide

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

    View Slide

85. Progressive Web Apps
    

    View Slide

86. View Slide

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

    View Slide

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

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

    View Slide

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

91. View Slide

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

93. JHipster jhipster.github.io
    

    View Slide

94. Get Started with JHipster 4 Demo
    

    View Slide

95. View Slide

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

97. The JHipster Mini-Book
    2.0 Release on Dec 5, 2016
    
    jhipster-book.com
    
    21-points.com
    
    @jhipster_book
    
    Write your own InfoQ mini-book! github.com/mraible/infoq-mini-book
    

    View Slide

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

99. Try
    

    View Slide

100. #Devoxx4Kids
     

     View Slide

101. Quality
     “A person who knows how to fix motorcycles—with Quality—is less
     likely to run short of friends than one who doesn't. And they aren't
     going to see him as some kind of object either. Quality destroys
     objectivity every time.”
     
     — Zen and the Art of Motorcycle Maintenance
     

     View Slide

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

103. Unit Test Example
     

     View Slide

104. bus.spec.ts
     

     View Slide

105. Jest facebook.github.io/jest
     

     View Slide

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

107. View Slide

108. developer.okta.com/blog/
     

     View Slide

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

     View Slide