Front End Development for Back End Developers - UberConf 2017

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.

72a2082c6a4dd79ad68befb3db911616?s=128

Matt Raible

July 21, 2017
Tweet

Transcript

  1. Matt Raible | @mraible Front End Development for Back End

    Developers July 21, 2017 #UberConf17
  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
  3. None
  4. None
  5. None
  6. Authentication Standards

  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?
  8. My Web Dev Journey

  9. What is modern front end development?

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

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

  12. JavaScript Framework Explosion

  13. None
  14. None
  15. Let’s do some learning!

  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
  17. None
  18. None
  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
  20. bus.ts

  21. TypeScript 2.3

  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
  23. Front End Build Tools Old School: Gulp New School: SystemJS

    Hip: Webpack Web Dependencies: Old School: Bower New School: npm Hip: yarn
  24. Yeoman The web's scaffolding tool for modern webapps Helps you

    kickstart new projects Promotes the Yeoman workflow yeoman.io
  25. Browsersync browsersync.io

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

    'app/**/*.html']) .on('change', browserSync.reload); });
  27. Webpack

  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'] } } ] } };
  29. Cool Webpack Features webpack-bundle-analyzer webpack-dashboard

  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
  31. https://xkcd.com/303/

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

  33. None
  34. None
  35. Jobs on Indeed July 21, 2017 0 2,000 4,000 6,000

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

    70,000 Angular Aurelia Backbone Knockout Ember React Vue
  37. Stack Overflow Trends https://stackoverflow.blog/2017/05/09/introducing-stack-overflow-trends

  38. GitHub Stars July 21, 2017 0 20,000 40,000 60,000 80,000

    Angular Aurelia Backbone Knockout Ember React Vue
  39. GitHub Star History https://github.com/timqian/star-history

  40. Hello World with Angular import { Component } from '@angular/core';

    @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>` }) export class AppComponent { name = 'World'; } <my-app></my-app> https://angular.io/docs/ts/latest/quickstart.html
  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 { }
  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);
  43. None
  44. Angular CLI

  45. Angular CLI

  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
  47. Angular and Angular CLI Demos https://github.com/mraible/ng-demo https://youtu.be/Jq3szz2KOOs (Building) https://youtu.be/TksyjxipM4M (Testing)

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

  49. None
  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
  51. Hello World with React http://codepen.io/gaearon/pen/ZpvBNJ?editors=0100 <div id="root"></div> <script> ReactDOM.render( <h1>Hello,

    world!</h1>, document.getElementById('root') ); </script>
  52. Learning React https://vimeo.com/213710634

  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);
  54. Declarative Code if (count === 0) { return <div className="bell"/>;

    } else if (count <= 99) { return ( <div className="bell"> <span className="badge">{count}</span> </div> ); } else { return ( <div className="bell onFire"> <span className="badge">99+</span> </div> ); }
  55. None
  56. Create React App

  57. Create React App

  58. Ships with documentation!

  59. Hello World with Vue.js https://jsfiddle.net/chrisvfritz/50wL7mdz/ <div id="app"> <p>{{ message }}</p>

    </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }); </script>
  60. Learning Vue.js https://youtu.be/utJGnK9D_UQ

  61. Vue.js Code <script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="app"> <button v-on:click="clickedButton()">Click here!</button> </div>

    <script> new Vue({ el: '#app', methods: { clickedButton: function(event) { console.log(event); alert("You clicked the button!"); } } }); </script>
  62. None
  63. Vue CLI

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

  65. Server-Side Java Support

  66. None
  67. None
  68. Cascading Style Sheets #app { background: #eee; } .blog-post {

    padding: 20px; } .blog-post > p:first { font-weight: 400; } img + span.caption { font-style: italic; }
  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
  70. CSS Frameworks

  71. Bootstrap 4

  72. Bootstrap 4

  73. CSS Framework Stars on GitHub July 21, 2017 0 30,000

    60,000 90,000 120,000 Bootstrap Foundation Pure Skeleton
  74. CSS Framework Star History https://github.com/timqian/star-history

  75. Front End Performance Optimization Reduce HTTP Requests Gzip HTML, JavaScript,

    and CSS Far Future Expires Headers Code Minification Optimize Images
  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
  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); }); } }
  78. None
  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("<html>" + "<img src='images/kodedu-logo.png'>" + "</html>"); } } }
  80. https://twitter.com/kosamari/status/859958929484337152

  81. None
  82. None
  83. Chrome Developer Tools Follow Umar Hansa - @umaar Follow Addy

    Osmani - @addyosmani
  84. Framework Tools Angular Augury React Developer Tools vue-devtools

  85. Progressive Web Apps

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

  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
  89. The PRPL Pattern Push Render Pre-cache Lazy-load

  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
  91. None
  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
  93. JHipster jhipster.github.io

  94. Get Started with JHipster 4 Demo

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

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

  100. #Devoxx4Kids

  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
  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!
  103. Unit Test Example

  104. bus.spec.ts

  105. Jest facebook.github.io/jest

  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…
  107. None
  108. developer.okta.com/blog/

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