Front Ends for Back End Developers - Spring I/O 2017
7 likes1,397 views
The document discusses modern front-end development practices primarily for back-end developers, covering JavaScript frameworks, tools, and performance optimization strategies. It highlights popular frameworks like Angular, React, and Vue.js, as well as essential build tools like Webpack and Gulp. Additionally, it addresses topics such as server-side support, progressive web applications, and security best practices.
![@spring_io
#springio17
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-springio2017-170622140322/85/Front-Ends-for-Back-End-Developers-Spring-I-O-2017-25-320.jpg)
![@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']
}
}
]
}
};](https://image.slidesharecdn.com/frontenddevelopmentforbackenddevelopers-springio2017-170622140322/85/Front-Ends-for-Back-End-Developers-Spring-I-O-2017-27-320.jpg)
![@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 { }](https://image.slidesharecdn.com/frontenddevelopmentforbackenddevelopers-springio2017-170622140322/85/Front-Ends-for-Back-End-Developers-Spring-I-O-2017-39-320.jpg)
Front Ends for Back End Developers - Spring I/O 2017
- 1. @spring_io #springio17 Front End Development for Back End Developers 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
- 6. @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?
- 7. My Web Dev Journey
- 8. @spring_io #springio17 What is modern front end development?
- 9. @spring_io #springio17 Web Frameworks Over the Years https://github.com/mraible/history-of-web-frameworks-timeline
- 14. @spring_io #springio17 Let’s do some learning!
- 15. @spring_io #springio17 ES6, ES7 and TypeScript ES5: es5.github.io ES6: git.io/es6features ES7: bit.ly/es7features TS: www.typescriptlang.org TSES7ES6ES5
- 18. @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
- 21. “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
- 22. @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
- 23. @spring_io #springio17 Yeoman The web's scaffolding tool for modern webapps Helps you kickstart new projects Promotes the Yeoman workflow yeoman.io
- 25. @spring_io #springio17 Gulp gulp.task('serve', function() { browserSync.init({ server: './app' }); gulp.watch(['app/**/*.js', 'app/**/*.css', 'app/**/*.html']) .on('change', browserSync.reload); });
- 27. @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'] } } ] } };
- 29. @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
- 31. @spring_io #springio17 @spring_io #springio17 Leading JavaScript Frameworks in 2017 angular.io facebook.github.io/react vuejs.org
- 34. @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
- 35. @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
- 37. @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
- 38. @spring_io #springio17 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
- 39. @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 { }
- 40. @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);
- 44. @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
- 45. @spring_io #springio17 Angular and Angular CLI Demos https://github.com/mraible/ng-demo https://youtu.be/Jq3szz2KOOs (Building) https://youtu.be/TksyjxipM4M (Testing)
- 46. @spring_io #springio17 Authentication with OpenID Connect http://developer.okta.com http://bit.ly/ng-okta youtube.com/watch?v=Kb56GzQ2pSk
- 48. @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
- 49. @spring_io #springio17 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>
- 51. @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);
- 52. @spring_io #springio17 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> ); }
- 57. @spring_io #springio17 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>
- 59. @spring_io #springio17 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>
- 63. @spring_io #springio17 @spring_io #springio17 Server-Side Support Angular Universal merged into Angular 4 mobile.twitter.com Nuxt.js
- 67. @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; }
- 68. @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
- 72. @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
- 73. @spring_io #springio17 Front End Performance Optimization Reduce HTTP Requests Gzip HTML, JavaScript, and CSS Far Future Expires Headers Code Minification Optimize Images
- 74. @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
- 75. @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); }); } }
- 77. @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("<html>" + "<img src='images/kodedu-logo.png'>" + "</html>"); } } }
- 81. @spring_io #springio17 Chrome Developer Tools Follow Umar Hansa - @umaar Follow Addy Osmani - @addyosmani
- 82. @spring_io #springio17 Framework Tools Angular Augury React Developer Tools vue-devtools
- 85. “We’ve failed on mobile” — Alex Russell https://youtu.be/K1SFnrf4jZo
- 86. @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
- 87. @spring_io #springio17 The PRPL Pattern Push Render Pre-cache Lazy-load
- 88. @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
- 90. @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
- 93. @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
- 94. @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
- 96. #Devoxx4Kids
- 97. @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
- 98. @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!
- 102. @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…