Front End Development for Back End Developers - Denver Startup Week 2017

72a2082c6a4dd79ad68befb3db911616?s=47 Matt Raible
September 25, 2017

Front End Development for Back End Developers - Denver Startup Week 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. I'll dive 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

September 25, 2017
Tweet

Transcript

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

    Developers September 25, 2017 #DENStartupWeek
  2. TITLE SPONSORS TRACK SPONSORS

  3. HEADLINE SPONSORS PARTNER SPONSORS MEMBER SPONSORS Baker Hostetler Bradford, LTD

    Capital One Coastal Cloud Colorado Impact Fund Connect For Health Colorado Cooley Corus360 EKS & H Event Integrity Full Contact Gary Community Investments General Assembly Groundfloor Media / CenterTable Guiceworks ImageSeller Ink Monstr Intelivideo Luna Gourmet Coffee & Tea Nanno Office of Economic Development Pass Gas Denver Slalom Wazee Digital Accenture Bridgepoint Education Butler Snow Delta Tables Hogan Lovells Meyer Law Name.com Slifer Smith & Frampton SoGnar Sounddown Swiftpage The Denver Foundation Zipcar
  4. 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
  5. None
  6. None
  7. None
  8. Authentication Standards

  9. 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?
  10. OAuth 2.0 Overview Today’s Agenda JavaScript / TypeScript Build Tools

    JavaScript Frameworks CSS Progressive Web Apps JHipster
  11. My Web Dev Journey

  12. What is modern front end development?

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

  14. JavaScript Framework Explosion

  15. None
  16. None
  17. Let’s do some learning!

  18. ES6, ES7 and TypeScript ES5: es5.github.io ES6: git.io/es6features ES7: bit.ly/es7features

    TS: www.typescriptlang.org TS ES7 ES6 ES5
  19. http://caniuse.com/#search=es5

  20. http://caniuse.com/#search=es6

  21. 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
  22. bus.ts

  23. TypeScript 2.3

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

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

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

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

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

  30. Write and Bundle // bar.js export default function bar() {

    // code here } // app.js import bar from './bar'; bar(); // webpack.config.js module.exports = { entry: './app.js', output: { filename: 'bundle.js' } } <!-- index.html --> <html> <head> ... </head> <body> ... <script src="bundle.js"></script> </body> </html>
  31. 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'] } } ] } };
  32. webpack.academy

  33. https://xkcd.com/303/

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

  35. None
  36. None
  37. @spring_io #springio17 Jobs on Indeed September 2017 0 1,750 3,500

    5,250 7,000 Angular Aurelia Backbone Ember Knockout React Vue
  38. @spring_io #springio17 Stack Overflow Tags September 2017 0 20,000 40,000

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

  40. @spring_io #springio17 GitHub Stars September 2017 0 20,000 40,000 60,000

    80,000 Angular Aurelia Backbone Knockout Ember React Vue
  41. @spring_io #springio17 GitHub Star Growth

  42. 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
  43. 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 { }
  44. 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);
  45. None
  46. Angular CLI

  47. Angular CLI

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

  51. None
  52. OpenID Connect https://www.youtube.com/watch?v=Kb56GzQ2pSk

  53. developer.okta.com

  54. developer.okta.com

  55. Ionic Framework

  56. 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
  57. 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>
  58. Learning React https://vimeo.com/213710634

  59. 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);
  60. 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> ); }
  61. None
  62. Create React App

  63. Create React App

  64. Ships with documentation!

  65. Authentication with React

  66. 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>
  67. Learning Vue.js https://youtu.be/utJGnK9D_UQ

  68. 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>
  69. None
  70. Vue CLI

  71. Vue CLI

  72. Authentication with Vue.js

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

  74. Server-Side Java Support

  75. Cascading Style Sheets #app { background: #eee; } .blog-post {

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

  78. Bootstrap 4

  79. Bootstrap 4

  80. CSS Framework Stars on GitHub September 2017 0 30,000 60,000

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

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

    and CSS Far Future Expires Headers Code Minification Optimize Images
  83. 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
  84. 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); }); } }
  85. None
  86. 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>"); } } }
  87. https://twitter.com/kosamari/status/859958929484337152

  88. None
  89. None
  90. Chrome Developer Tools Follow Umar Hansa - @umaar Follow Addy

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

  92. Progressive Web Apps

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

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

  97. 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
  98. None
  99. “Reusable UI widgets created using open web technology.” - MDN

    Web Components consists of four technologies: Custom Elements HTML Templates Shadow DOM HTML Imports Web Components https://www.polymer-project.org https://stenciljs.com https://www.webcomponents.org
  100. None
  101. 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
  102. JHipster jhipster.github.io

  103. Get Started with JHipster 4 Demo

  104. None
  105. 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

  106. The JHipster Mini-Book Written with Asciidoctor Quick and to the

    point, 130 pages Developed a real world app: www.21-points.com Free Download from infoq.com/minibooks/jhipster-4-mini-book @jhipster_book
  107. 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
  108. Try

  109. #Devoxx4Kids

  110. 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!
  111. bus.spec.ts

  112. Jest facebook.github.io/jest

  113. 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…
  114. None
  115. developer.okta.com/blog/

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