Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Front-end for Java developers Devoxx France 2018

831 views

Published on

Slides from my Devoxx France 2018 talk, about frontend stack for Java developers

Published in: Technology
  • Best site for flirting and sex in your area you can find there: https://bit.ly/2SlcOnO
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Front-end for Java developers Devoxx France 2018

  1. 1. @deepu105#DevoxxFR 2018 By Deepu K Sasidharan, XebiaLabs April 20, 2018 Frontend stack for Java Developers
  2. 2. @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
  3. 3. @deepu105#DevoxxFR 2018 About XebiaLabs
  4. 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. 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
  6. 6. Why most Java developers hate frontend?
  7. 7. @deepu105#DevoxxFR 2018 Frontend options 7 years ago =
  8. 8. @deepu105#DevoxxFR 2018 The Rise of MV* Frameworks
  9. 9. @deepu105#DevoxxFR 2018
  10. 10. @deepu105#DevoxxFR 2018 “Yet Another Framework Syndrome”
  11. 11. Myths about the frontend landscape
  12. 12. JavaScript sucks/CSS sucks JavaScript is not even a real language JavaScript is not powerful enough
  13. 13. Frameworks disappear overnight There are too many frameworks and Libraries to learn What I learn might be obsolete next week
  14. 14. How to make Java developers like(love) JavaScript
  15. 15. @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
  16. 16. @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
  17. 17. @deepu105#DevoxxFR 2018
  18. 18. @deepu105#DevoxxFR 2018
  19. 19. Brief History of Angular, React & Vue.Js
  20. 20. @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
  21. 21. https://angular.io/guide/quickstart
  22. 22. @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
  23. 23. https://codepen.io/gaearon/pen/ZpvBNJ
  24. 24. @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
  25. 25. Hello world with VueJS
  26. 26. My favorite and not-so-favorite features
  27. 27. Your Favorite Angular Features?
  28. 28. 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
  29. 29. Your Favorite React Features?
  30. 30. 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
  31. 31. Your Favorite VueJS Features?
  32. 32. 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
  33. 33. Framework vs Library Angular = Full fledged MVVM framework React/VueJS = View rendering library Angular = React + Redux + React Router … (React & Friends)
  34. 34. 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
  35. 35. Kickstarting Angular and React
  36. 36. 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
  37. 37. An optimal stack for Java developers
  38. 38. Easy to start Flexible Typescript React Redux React router Jest Typescript Angular Karma Mocha Chai
  39. 39. Using JHipster to kickstart
  40. 40. Want to learn more about JHipster? Come to our BOF tonight!
  41. 41. Demo Time!
  42. 42. Recommendations
  43. 43. Learn the Language well, Frameworks are just tools to help
  44. 44. 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
  45. 45. 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/
  46. 46. Other Opinions https://hackernoon.com/angular-vs-react-the-deal-breaker-7d76c04496bc
  47. 47. 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
  48. 48. Thank you!

×