4. @deepu105#DevoxxFR 2018
What about you?
How many folks are Java developers?
How many are web developers?
Who likes JavaScript? Who likes TypeScript better?
Are you a fan of:
Angular
React
Vue.js
5. @deepu105#DevoxxFR 2018
Today’s Agenda
● Why most Java developers hate frontend
● Myths about the frontend landscape
● How to make Java developers like JavaScript
● History of Angular, React & VueJS
● My favorite and not-so-favorite features
● Kickstarting Angular and React
● An optimal stack for Java developers
● Using JHipster to kickstart
● Recommendations
14. How to make Java developers
like(love)
JavaScript
15.
16. @deepu105#DevoxxFR 2018
What is TypeScript
A strict syntactical superset of JavaScript(upto ES2018(ES9))
Optional static typing support
Transpiles to JavaScript
Maintained by Microsoft with major collaboration from Google
Great editor and IDE support
17. @deepu105#DevoxxFR 2018
TypeScript features
Static type checking, Type inference, Type aliasing
Union, Intersection, Function and Hybrid types
Generics, Decorators(a.k.a annotations), Mixins(a.k.a traits)
Interface, Enum, Tuple support
Private, optional, readonly properties
JSX support, JS type checking and more
21. @deepu105#DevoxxFR 2018
The History of Angular
Started as AngularJS in 2009 by Miško Hevery
GWT == 3 developers, 6 months
AngularJS == 1 developer, 3 weeks
Announced Angular 2, September 2014
2.0 Released in September 2016
5.0 Released November 1, 2017
25. @deepu105#DevoxxFR 2018
The History of React
React was created by Jordan Walke in 2011 &
Open sourced in May 2013
Inspired by XHP, an HTML components
framework for PHP
Within one year, had large sites
Khan Academy, New York Times, Airbnb
+ Facebook and Instagram
16.0 released on September 26, 2017
27. @deepu105#DevoxxFR 2018
The History of Vue.JS
Vue.Js was created by Evan You and released
in February 2014
Borrows concepts from AngularJS and React
Used by Alibaba, Baidu, Adobe, GitLab, etc.
2.5 released on October 13, 2017
33. My Favorite React Features
One way binding
Virtual DOM
JSX
Flexibility
Component based composability
Smart & Dumb components
React Native
One way binding
Dependency fatigue
JSX
Too many options for state management
No official style guide
35. My Favorite VueJS Features
Two way binding
Virtual DOM
JSX is supported
Flexibility
Component based composability
Low learning curve
Smaller community
No official style guide
Some library documentation are only in
chinese
37. Let’s get the similarities out of the way
All are component-based
All are client side MVVM frameworks for building SPAs
All supports server-side rendering
All of them supports native mobile app development
All of them requires a build tool like webpack for optimal usage
All of them have comparable performance
All of them are MIT licenced (Finally!)
All of them support Typescript and provides official type definitions
42. Angular CLI vs Create React App
Minimal dependencies
ES6 by default
Yarn by default
325 Lines of code (not counting
README)
PWA Score: 55/82
ng new app-name --minimal
TypeScript by default
npm by default
225 Lines of code
PWA Score: 18/36 (dev/prod)
ng generate component |
service
50. Recommendation
If you have a lot of state: React
If you need simplicity & clean code: VueJS
If you’re familiar with Java MVC frameworks: Angular
If you want the easiest to learn and lightweight framework: VueJS
If you work at Facebook: React
If you work at Google: Angular
If you like structure and a helping hand: Angular
If you like flexibility: React or VueJS