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

Front Ends for Back End Developers - Spring IO 2017

Front Ends for Back End Developers - Spring IO 2017

YouTube: https://www.youtube.com/watch?v=HnX09pdxEQI

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

May 18, 2017
Tweet

More Decks by Matt Raible

Other Decks in Technology

Transcript

  1. @spring_io
    #springio17
    Front End Development
    for Back End Developers

    Matt Raible
    @mraible

    View full-size 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 full-size slide

  3. @spring_io
    #springio17
    @spring_io
    #springio17
    Authentication Standards

    View full-size slide

  4. @spring_io
    #springio17
    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 full-size slide

  5. My Web Dev Journey

    View full-size slide

  6. @spring_io
    #springio17
    What is modern front end development?

    View full-size slide

  7. @spring_io
    #springio17
    Web Frameworks Over the Years
    https://github.com/mraible/history-of-web-frameworks-timeline

    View full-size slide

  8. @spring_io
    #springio17
    @spring_io
    #springio17
    JSF
    https://zeroturnaround.com/webframeworksindex

    View full-size slide

  9. @spring_io
    #springio17
    JavaScript Framework Explosion

    View full-size slide

  10. @spring_io
    #springio17
    Let’s do some learning!

    View full-size slide

  11. @spring_io
    #springio17
    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 full-size slide

  12. @spring_io
    #springio17
    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 full-size slide

  13. @spring_io
    #springio17
    @spring_io
    #springio17
    bus.ts

    View full-size slide

  14. @spring_io
    #springio17
    TypeScript 2.3

    View full-size slide

  15. “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 full-size slide

  16. @spring_io
    #springio17
    Front End Build Tools
    Old School: Gulp

    New School: SystemJS

    Hip: Webpack

    Web Dependencies:

    Old School: Bower

    New School: npm

    Hip: yarn

    View full-size slide

  17. @spring_io
    #springio17
    Yeoman
    The web's scaffolding tool for modern webapps

    Helps you kickstart new projects

    Promotes the Yeoman workflow
    yeoman.io

    View full-size slide

  18. @spring_io
    #springio17
    Browsersync browsersync.io

    View full-size slide

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

    View full-size slide

  20. @spring_io
    #springio17
    Webpack

    View full-size slide

  21. @spring_io
    #springio17
    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 full-size slide

  22. @spring_io
    #springio17
    Cool Webpack Features
    webpack-bundle-analyzer
    webpack-dashboard

    View full-size slide

  23. @spring_io
    #springio17
    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 full-size slide

  24. https://xkcd.com/303/

    View full-size slide

  25. @spring_io
    #springio17
    @spring_io
    #springio17
    Leading JavaScript Frameworks in 2017
    angular.io
    facebook.github.io/react
    vuejs.org

    View full-size slide

  26. @spring_io
    #springio17
    @spring_io
    #springio17
    Jobs on Indeed
    May 2017
    0
    2,000
    4,000
    6,000
    8,000
    Angular Aurelia Backbone Ember Knockout React Vue

    View full-size slide

  27. @spring_io
    #springio17
    @spring_io
    #springio17
    Stack Overflow Tags
    May 2017
    0
    12,500
    25,000
    37,500
    50,000
    Angular Aurelia Backbone Knockout Ember React Vue

    View full-size slide

  28. @spring_io
    #springio17
    Stack Overflow Trends
    https://stackoverflow.blog/2017/05/09/introducing-stack-overflow-trends

    View full-size slide

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

    View full-size slide

  30. @spring_io
    #springio17
    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 full-size slide

  31. @spring_io
    #springio17
    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 full-size slide

  32. @spring_io
    #springio17
    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 full-size slide

  33. @spring_io
    #springio17
    Angular CLI

    View full-size slide

  34. @spring_io
    #springio17
    Angular CLI

    View full-size slide

  35. @spring_io
    #springio17
    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 full-size slide

  36. @spring_io
    #springio17
    Angular and Angular CLI Demos
    https://github.com/mraible/ng-demo

    https://youtu.be/Jq3szz2KOOs
    (Building)

    https://youtu.be/TksyjxipM4M
    (Testing)

    View full-size slide

  37. @spring_io
    #springio17
    Authentication with OpenID Connect
    http://developer.okta.com

    http://bit.ly/ng-okta

    youtube.com/watch?v=Kb56GzQ2pSk

    View full-size slide

  38. @spring_io
    #springio17
    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 full-size slide

  39. @spring_io
    #springio17
    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 full-size slide

  40. @spring_io
    #springio17
    Learning React
    https://vimeo.com/213710634

    View full-size slide

  41. @spring_io
    #springio17
    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 full-size slide

  42. @spring_io
    #springio17
    Declarative Code
    if (count === 0) {
    return ;
    } else if (count <= 99) {
    return (

    {count}

    );
    } else {
    return (

    99+

    );
    }

    View full-size slide

  43. @spring_io
    #springio17
    Create React App

    View full-size slide

  44. @spring_io
    #springio17
    Create React App

    View full-size slide

  45. @spring_io
    #springio17
    @spring_io
    #springio17
    Ships with documentation!

    View full-size slide

  46. @spring_io
    #springio17
    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 full-size slide

  47. @spring_io
    #springio17
    @spring_io
    #springio17
    Learning Vue.js
    https://youtu.be/utJGnK9D_UQ

    View full-size slide

  48. @spring_io
    #springio17
    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 full-size slide

  49. @spring_io
    #springio17
    Vue CLI

    View full-size slide

  50. @spring_io
    #springio17
    Vue CLI

    View full-size slide

  51. @spring_io
    #springio17
    @spring_io
    #springio17
    Server-Side Support
    Angular Universal merged into Angular 4
    mobile.twitter.com
    Nuxt.js

    View full-size slide

  52. @spring_io
    #springio17
    @spring_io
    #springio17
    Server-Side Java Support

    View full-size slide

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

    View full-size slide

  54. @spring_io
    #springio17
    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 full-size slide

  55. @spring_io
    #springio17
    @spring_io
    #springio17
    CSS Frameworks

    View full-size slide

  56. @spring_io
    #springio17
    @spring_io
    #springio17
    Bootstrap 4

    View full-size slide

  57. @spring_io
    #springio17
    @spring_io
    #springio17
    Bootstrap 4

    View full-size slide

  58. @spring_io
    #springio17
    @spring_io
    #springio17
    CSS Framework Stars on GitHub
    May 2017
    0
    30,000
    60,000
    90,000
    120,000
    Bootstrap Foundation Pure Skeleton

    View full-size slide

  59. @spring_io
    #springio17
    Front End Performance Optimization
    Reduce HTTP Requests

    Gzip HTML, JavaScript, and CSS

    Far Future Expires Headers

    Code Minification

    Optimize Images

    View full-size slide

  60. @spring_io
    #springio17
    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 full-size slide

  61. @spring_io
    #springio17
    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 full-size slide

  62. @spring_io
    #springio17
    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 full-size slide

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

    View full-size slide

  64. @spring_io
    #springio17
    Chrome Developer Tools
    Follow Umar Hansa - @umaar

    Follow Addy Osmani - @addyosmani

    View full-size slide

  65. @spring_io
    #springio17
    Framework Tools
    Angular Augury
    React Developer Tools
    vue-devtools

    View full-size slide

  66. @spring_io
    #springio17
    @spring_io
    #springio17
    Progressive Web Apps

    View full-size slide

  67. “We’ve failed on mobile”

    — Alex Russell

    https://youtu.be/K1SFnrf4jZo

    View full-size slide

  68. @spring_io
    #springio17
    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 full-size slide

  69. @spring_io
    #springio17
    The PRPL Pattern
    Push

    Render

    Pre-cache

    Lazy-load

    View full-size slide

  70. @spring_io
    #springio17
    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 full-size slide

  71. developer.okta.com/blog

    View full-size slide

  72. @spring_io
    #springio17
    @spring_io
    #springio17
    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 full-size slide

  73. @spring_io
    #springio17
    @spring_io
    #springio17
    JHipster jhipster.github.io

    View full-size slide

  74. @spring_io
    #springio17
    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 full-size slide

  75. @spring_io
    #springio17
    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 full-size slide

  76. @spring_io
    #springio17
    Try

    View full-size slide

  77. #Devoxx4Kids

    View full-size slide

  78. @spring_io
    #springio17
    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 full-size slide

  79. @spring_io
    #springio17
    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 full-size slide

  80. @spring_io
    #springio17
    @spring_io
    #springio17
    Unit Test Example

    View full-size slide

  81. @spring_io
    #springio17
    @spring_io
    #springio17
    bus.spec.ts

    View full-size slide

  82. @spring_io
    #springio17
    @spring_io
    #springio17
    Jest facebook.github.io/jest

    View full-size slide

  83. @spring_io
    #springio17
    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 full-size slide

  84. developer.okta.com/blog

    View full-size slide

  85. @spring_io
    #springio17
    Questions?
    Keep in touch!

    raibledesigns.com

    @mraible

    Presentations

    speakerdeck.com/mraible

    Code

    github.com/mraible

    View full-size slide