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.

1. Matt Raible • @mraible
Front End Development for Back End Developers

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

5. #DevoxxUK
Authentication Standards

6. #DevoxxUK
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. #DevoxxUK
What is modern front end development?

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

10. #DevoxxUK
JavaScript Framework Explosion

13. #DevoxxUK
Let’s do some learning!

14. #DevoxxUK
ES6, ES7 and TypeScript
ES5: es5.github.io
ES6: git.io/es6features
ES7: bit.ly/es7features
TS: www.typescriptlang.org
TSES7ES6ES5

17. #DevoxxUK
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

18. #DevoxxUK
bus.ts

19. #DevoxxUK
TypeScript 2.3

20. “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

21. #DevoxxUK
Front End Build Tools
Old School: Gulp
New School: SystemJS
Hip: Webpack
Web Dependencies:
Old School: Bower
New School: npm
Hip: yarn

22. #DevoxxUK
Yeoman
The web's scaffolding tool for modern webapps
Helps you kickstart new projects
Promotes the Yeoman workflow
yeoman.io

23. #DevoxxUK
Browsersync browsersync.io

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

25. #DevoxxUK
Webpack

26. #DevoxxUK
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']
}
}
]
}
};

27. #DevoxxUK
Cool Webpack Features
webpack-bundle-analyzer
webpack-dashboard

28. #DevoxxUK
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

29. https://xkcd.com/303/

30. #DevoxxUK
Leading JavaScript Frameworks in 2017
angular.io
facebook.github.io/react
vuejs.org

33. #DevoxxUK
Jobs on Indeed
May 2017
0
2,000
4,000
6,000
8,000
Angular Aurelia Backbone Ember Knockout React Vue

34. #DevoxxUK
Stack Overflow Tags
May 2017
0
12,500
25,000
37,500
50,000
Angular Aurelia Backbone Knockout Ember React Vue

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

36. #DevoxxUK
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

37. #DevoxxUK
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 { }

38. #DevoxxUK
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);

40. #DevoxxUK
Angular CLI

41. #DevoxxUK
Angular CLI

42. #DevoxxUK
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

43. #DevoxxUK
Angular and Angular CLI Demos
https://github.com/mraible/ng-demo
https://youtu.be/Jq3szz2KOOs
(Building)
https://youtu.be/TksyjxipM4M
(Testing)

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

46. #DevoxxUK
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

47. #DevoxxUK
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>

48. #DevoxxUK
Learning React
https://vimeo.com/213710634

49. #DevoxxUK
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);

50. #DevoxxUK
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>
);
}

52. #DevoxxUK
Create React App

53. #DevoxxUK
Create React App

54. #DevoxxUK
Ships with documentation!

55. #DevoxxUK
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>

56. #DevoxxUK
Learning Vue.js
https://youtu.be/utJGnK9D_UQ

57. #DevoxxUK
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>

59. #DevoxxUK
Vue CLI

60. #DevoxxUK
Vue CLI

61. #DevoxxUK
Server-Side Support
Angular Universal merged into Angular 4
mobile.twitter.com
Nuxt.js

62. #DevoxxUK
Server-Side Java Support

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

66. #DevoxxUK
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

67. #DevoxxUK
CSS Frameworks

68. #DevoxxUK
Bootstrap 4

69. #DevoxxUK
Bootstrap 4

70. #DevoxxUK
CSS Framework Stars on GitHub
May 2017
0
30,000
60,000
90,000
120,000
Bootstrap Foundation Pure Skeleton

71. #DevoxxUK
Front End Performance Optimization
Reduce HTTP Requests
Gzip HTML, JavaScript, and CSS
Far Future Expires Headers
Code Minification
Optimize Images

72. #DevoxxUK
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

73. #DevoxxUK
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);
});
}
}

75. #DevoxxUK
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>");
}
}
}

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

79. #DevoxxUK
Chrome Developer Tools
Follow Umar Hansa - @umaar
Follow Addy Osmani - @addyosmani

80. #DevoxxUK
Progressive Web Apps

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

83. #DevoxxUK
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

84. #DevoxxUK
The PRPL Pattern
Push
Render
Pre-cache
Lazy-load

85. #DevoxxUK
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

86. developer.okta.com/blog

87. #DevoxxUK
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

88. #DevoxxUK
JHipster jhipster.github.io

90. #DevoxxUK
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

91. #DevoxxUK
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

92. #DevoxxUK
Try

93. #Devoxx4Kids

94. #DevoxxUK
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

95. #DevoxxUK
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!

96. #DevoxxUK
Unit Test Example

97. #DevoxxUK
bus.spec.ts

98. #DevoxxUK
Jest facebook.github.io/jest

99. #DevoxxUK
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…

101. developer.okta.com/blog

102. #DevoxxUK
Questions?
Keep in touch!
raibledesigns.com
@mraible
Presentations
speakerdeck.com/mraible
Code
github.com/mraible