Front End Development for Back End Developers - vJUG24 2017
2 likes743 views
The document discusses modern front-end development practices aimed at back-end developers, covering topics like JavaScript frameworks, TypeScript, build tools, and Progressive Web Apps. It highlights various front-end frameworks such as Angular, React, and Vue.js, along with CSS frameworks like Bootstrap. Additionally, it addresses performance optimization strategies, security best practices, and resources for further learning, encouraging developers to explore and experiment with new technologies.
![Gulp
gulp.task('serve', function() {
browserSync.init({
server: './app'
});
gulp.watch(['app/**/*.js', 'app/**/*.css', 'app/**/*.html'])
.on('change', browserSync.reload);
});](https://image.slidesharecdn.com/frontenddevelopmentforbackenddevelopers-vjug242017-171026143123/85/Front-End-Development-for-Back-End-Developers-vJUG24-2017-26-320.jpg)
![webpack.conďŹg.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']
}
}
]
}
};](https://image.slidesharecdn.com/frontenddevelopmentforbackenddevelopers-vjug242017-171026143123/85/Front-End-Development-for-Back-End-Developers-vJUG24-2017-29-320.jpg)
![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 { }](https://image.slidesharecdn.com/frontenddevelopmentforbackenddevelopers-vjug242017-171026143123/85/Front-End-Development-for-Back-End-Developers-vJUG24-2017-41-320.jpg)
Front End Development for Back End Developers - vJUG24 2017
- 1. Front End Development for Back End Developers October 25, 2017 #vjug24 Matt Raible ¡ @mraible
- 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
- 8. OAuth 2.0 Overview Todayâs Agenda JavaScript / TypeScript Build Tools JavaScript Frameworks CSS Progressive Web Apps JHipster
- 9. My Web Dev Journey
- 10. What is modern front end development?
- 11. Web Frameworks Over the Years https://github.com/mraible/history-of-web-frameworks-timeline
- 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 TSES7ES6ES5
- 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 eďŹcient. 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 scaďŹolding tool for modern webapps Helps you kickstart new projects Promotes the Yeoman workďŹow yeoman.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. 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>
- 29. webpack.conďŹg.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'] } } ] } };
- 30. webpack.academy
- 32. Leading JavaScript Frameworks in 2017 angular.io facebook.github.io/react vuejs.org
- 35. @spring_io #springio17 Jobs on Indeed October 2017 0 2,000 4,000 6,000 8,000 Angular Backbone Ember Knockout Polymer React Vue
- 36. @spring_io #springio17 Stack OverďŹow Tags October 2017 0 20,000 40,000 60,000 80,000 Angular Backbone Knockout Ember Polymer React Vue
- 38. @spring_io #springio17 GitHub Stars October 0 20,000 40,000 60,000 80,000 Angular Backbone Knockout Ember Polymer React Vue
- 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/guide/quickstart
- 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);
- 44. Angular CLI
- 45. Angular CLI
- 47. Get Started with Angular Angular QuickStart https://angular.io/guide/quickstart Angular Seed https://github.com/mgechev/angular-seed Angular Seed Advanced https://github.com/NathanWalker/angular-seed-advanced
- 48. Angular and Angular CLI Demos https://github.com/mraible/ng-demo https://youtu.be/Jq3szz2KOOs (Building) https://youtu.be/TksyjxipM4M (Testing)
- 53. Ionic Framework
- 54. 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
- 55. 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>
- 57. Imperative Code if (count > 99) { if (!hasFire()) { 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);
- 58. 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> ); }
- 60. Create React App
- 61. Create React App
- 64. Hello World with Vue.js https://jsďŹddle.net/chrisvfritz/50wL7mdz/ <div id="app"> <p>{{ message }}</p> </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }); </script>
- 66. 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>
- 68. Vue CLI
- 69. Vue CLI
- 71. Server-Side Support Angular Universal merged into Angular 4 mobile.twitter.com Nuxt.js
- 73. Cascading Style Sheets #app { background: #eee; } .blog-post { padding: 20px; } .blog-post > p:first { font-weight: 400; } img + span.caption { font-style: italic; }
- 74. 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
- 75. CSS Frameworks
- 76. Bootstrap 4
- 77. Bootstrap 4
- 78. CSS Framework Stars on GitHub October 2017 0 30,000 60,000 90,000 120,000 Bootstrap Foundation Pure Skeleton Material Components
- 79. CSS Framework Star History https://github.com/timqian/star-history
- 80. Front End Performance Optimization Reduce HTTP Requests Gzip HTML, JavaScript, and CSS Far Future Expires Headers Code MiniďŹcation Optimize Images
- 81. 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
- 82. Chrome Developer Tools Follow Umar Hansa - @umaar Follow Addy Osmani - @addyosmani
- 83. Framework Tools Angular Augury React Developer Tools vue-devtools
- 85. âWeâve failed on mobileâ â Alex Russell https://youtu.be/K1SFnrf4jZo
- 86. Mobile Hates You! How to ďŹght back: Implement PRPL Get a ~$150-200 unlocked Android (e.g. Moto G4) Use chrome://inspect && chrome://inspect?tracing Lighthouse DevTools Network & CPU Throttling
- 87. The PRPL Pattern Push Render Pre-cache Lazy-load
- 88. 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
- 90. â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
- 92. Security: OWASP Top 10 1. Injection 2. Broken Auth & Session Mgmt 3. Cross-Site Scripting (XSS) 4. Broken Access Control 5. Security MisconďŹguration 6. Sensitive Data Exposure 7. InsuďŹcient Attack Protection 8. Cross-Site Request Forgery 9. Components w/ Vulnerabilities 10. Underprotected APIs
- 94. Get Started with JHipster 4 Demo
- 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 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
- 98. 21-Points Health v4 now live! www.21-points.com
- 99. 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
- 100. TRY
- 101. 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âŚ