Front-end for Java developers Devoxx France 2018

Slide 1

Slide 1 text

@deepu105 #DevoxxFR 2018 By Deepu K Sasidharan, XebiaLabs April 20, 2018 Frontend stack for Java Developers

Slide 2

Slide 2 text

@deepu105 #DevoxxFR 2018 About Me Javascript Evangelist Co-lead Senior product developer Robotics & Astronomy enthusiast https://www.packtpub.com/application-development/full-stack-development-jhipster

Slide 3

Slide 3 text

@deepu105 #DevoxxFR 2018 About XebiaLabs

Slide 4

Slide 4 text

@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

Slide 5

Slide 5 text

@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

Slide 6

Slide 6 text

Why most Java developers hate frontend?

Slide 7

Slide 7 text

@deepu105 #DevoxxFR 2018 Frontend options 7 years ago =

Slide 8

Slide 8 text

@deepu105 #DevoxxFR 2018 The Rise of MV* Frameworks

Slide 9

Slide 9 text

@deepu105 #DevoxxFR 2018

Slide 10

Slide 10 text

@deepu105 #DevoxxFR 2018 “Yet Another Framework Syndrome”

Slide 11

Slide 11 text

Myths about the frontend landscape

Slide 12

Slide 12 text

JavaScript sucks/CSS sucks JavaScript is not even a real language JavaScript is not powerful enough

Slide 13

Slide 13 text

Frameworks disappear overnight There are too many frameworks and Libraries to learn What I learn might be obsolete next week

Slide 14

Slide 14 text

How to make Java developers like(love) JavaScript

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

@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

Slide 17

Slide 17 text

@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

Slide 18

Slide 18 text

@deepu105 #DevoxxFR 2018

Slide 19

Slide 19 text

@deepu105 #DevoxxFR 2018

Slide 20

Slide 20 text

Brief History of Angular, React & Vue.Js

Slide 21

Slide 21 text

@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

Slide 22

Slide 22 text

https://angular.io/guide/quickstart

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

@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

Slide 26

Slide 26 text

https://codepen.io/gaearon/pen/ZpvBNJ

Slide 27

Slide 27 text

@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

Slide 28

Slide 28 text

Hello world with VueJS

Slide 29

Slide 29 text

My favorite and not-so-favorite features

Slide 30

Slide 30 text

Your Favorite Angular Features?

Slide 31

Slide 31 text

My Favorite Angular Features Dependency Injection Angular CLI Resembles Java MVC Frameworks Two-way Binding Components, Services, and Directives TypeScript Ionic Framework Webpack compiling TypeScript Searchability: Angular vs AngularJS Release Candidates in 2016 Testing Infrastructure Too much boilerplate code

Slide 32

Slide 32 text

Your Favorite React Features?

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Your Favorite VueJS Features?

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Framework vs Library Angular = Full fledged MVVM framework React/VueJS = View rendering library Angular = React + Redux + React Router … (React & Friends)

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Kickstarting Angular and React

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

An optimal stack for Java developers

Slide 44

Slide 44 text

Easy to start Flexible Typescript React Redux React router Jest Typescript Angular Karma Mocha Chai

Slide 45

Slide 45 text

Using JHipster to kickstart

Slide 46

Slide 46 text

Want to learn more about JHipster? Come to our BOF tonight!

Slide 47

Slide 47 text

Demo Time!

Slide 48

Slide 48 text

Recommendations

Slide 49

Slide 49 text

Learn the Language well, Frameworks are just tools to help

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Other Opinions https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-2017-comparison-c5c52d620176 https://clockwise.software/blog/angular-vs-react-vs-vue/

Slide 52

Slide 52 text

Other Opinions https://hackernoon.com/angular-vs-react-the-deal-breaker-7d76c04496bc

Slide 53

Slide 53 text

https://jhipster.tech @java_hipster Full Stack Development with JHipster ● Amazon: https://goo.gl/k1NBAv ● Packt: https://goo.gl/XvQLeN ○ Discount code: JHIPSTER50 for ebooks ○ Discount code: JHIPSTER15 for print books

Slide 54

Slide 54 text

Thank you!