Front End Development for Back End Developers - Devoxx UK 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. We’ll dive into the intricacies of Bootstrap, Material Design, ES6, and TypeScript. Finally, after getting you up to speed with all this new tech, we’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
   

   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. #DevoxxUK
   Authentication Standards
   

   View Slide

6. #DevoxxUK
   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

7. My Web Dev Journey
   

   View Slide

8. #DevoxxUK
   What is modern front end development?
   

   View Slide

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

   View Slide

10. #DevoxxUK
    JavaScript Framework Explosion
    

    View Slide

11. View Slide

12. View Slide

13. #DevoxxUK
    Let’s do some learning!
    

    View Slide

14. #DevoxxUK
    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

15. View Slide

16. View Slide

17. #DevoxxUK
    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

18. #DevoxxUK
    bus.ts
    

    View Slide

19. #DevoxxUK
    TypeScript 2.3
    

    View Slide

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

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

    View Slide

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

    View Slide

23. #DevoxxUK
    Browsersync browsersync.io
    

    View Slide

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

    View Slide

25. #DevoxxUK
    Webpack
    

    View Slide

26. #DevoxxUK
    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

27. #DevoxxUK
    Cool Webpack Features
    webpack-bundle-analyzer
    webpack-dashboard
    

    View Slide

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

29. https://xkcd.com/303/
    

    View Slide

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

    View Slide

31. View Slide

32. View Slide

33. #DevoxxUK
    Jobs on Indeed
    May 2017
    0
    2,000
    4,000
    6,000
    8,000
    Angular Aurelia Backbone Ember Knockout React Vue
    

    View Slide

34. #DevoxxUK
    Stack Overflow Tags
    May 2017
    0
    12,500
    25,000
    37,500
    50,000
    Angular Aurelia Backbone Knockout Ember React Vue
    

    View Slide

35. #DevoxxUK
    GitHub Stars
    May 2017
    0
    17,500
    35,000
    52,500
    70,000
    Angular Aurelia Backbone Knockout Ember React Vue
    

    View Slide

36. #DevoxxUK
    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

37. #DevoxxUK
    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

38. #DevoxxUK
    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

39. View Slide

40. #DevoxxUK
    Angular CLI
    

    View Slide

41. #DevoxxUK
    Angular CLI
    

    View Slide

42. #DevoxxUK
    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

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

    View Slide

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

    View Slide

45. View Slide

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

47. #DevoxxUK
    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

48. #DevoxxUK
    Learning React
    https://vimeo.com/213710634
    

    View Slide

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

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

    View Slide

51. View Slide

52. #DevoxxUK
    Create React App
    

    View Slide

53. #DevoxxUK
    Create React App
    

    View Slide

54. #DevoxxUK
    Ships with documentation!
    

    View Slide

55. #DevoxxUK
    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

56. #DevoxxUK
    Learning Vue.js
    https://youtu.be/utJGnK9D_UQ
    

    View Slide

57. #DevoxxUK
    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

58. View Slide

59. #DevoxxUK
    Vue CLI
    

    View Slide

60. #DevoxxUK
    Vue CLI
    

    View Slide

61. #DevoxxUK
    Server-Side Support
    Angular Universal merged into Angular 4
    mobile.twitter.com
    Nuxt.js
    

    View Slide

62. #DevoxxUK
    Server-Side Java Support
    

    View Slide

63. View Slide

64. View Slide

65. #DevoxxUK
    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

66. #DevoxxUK
    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

67. #DevoxxUK
    CSS Frameworks
    

    View Slide

68. #DevoxxUK
    Bootstrap 4
    

    View Slide

69. #DevoxxUK
    Bootstrap 4
    

    View Slide

70. #DevoxxUK
    CSS Framework Stars on GitHub
    May 2017
    0
    30,000
    60,000
    90,000
    120,000
    Bootstrap Foundation Pure Skeleton
    

    View Slide

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

    View Slide

72. #DevoxxUK
    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

73. #DevoxxUK
    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

74. View Slide

75. #DevoxxUK
    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

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

    View Slide

77. View Slide

78. View Slide

79. #DevoxxUK
    Chrome Developer Tools
    Follow Umar Hansa - @umaar
    
    Follow Addy Osmani - @addyosmani
    
    

    View Slide

80. #DevoxxUK
    Progressive Web Apps
    

    View Slide

81. View Slide

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

    View Slide

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

84. #DevoxxUK
    The PRPL Pattern
    Push
    
    Render
    
    Pre-cache
    
    Lazy-load
    

    View Slide

85. #DevoxxUK
    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

86. developer.okta.com/blog
    

    View Slide

87. #DevoxxUK
    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

88. #DevoxxUK
    JHipster jhipster.github.io
    

    View Slide

89. View Slide

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

91. #DevoxxUK
    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

92. #DevoxxUK
    Try
    

    View Slide

93. #Devoxx4Kids
    

    View Slide

94. #DevoxxUK
    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

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

96. #DevoxxUK
    Unit Test Example
    

    View Slide

97. #DevoxxUK
    bus.spec.ts
    

    View Slide

98. #DevoxxUK
    Jest facebook.github.io/jest
    

    View Slide

99. #DevoxxUK
    Action!
    Don’t be afraid to try new things
    
    Learn JavaScript
    
    Try one of these frameworks
    
    Form your own opinions
    
    Or just wait a few months…
    

    View Slide

100. View Slide

101. developer.okta.com/blog
     

     View Slide

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

     View Slide