Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Front End Development for Back End Developers - Devoxx UK 2017

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.

Matt Raible
PRO

May 12, 2017
Tweet

More Decks by Matt Raible

Other Decks in Technology

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