Engage 2019: The good, the bad and the ugly: a not so objective view on front end development

In the front end development world there are 3 dominant players, Angular, ReactJS and VueJs.
Every framework has a strong fan base. And of course lots of pros and cons The best way to learn more about the strengths and weaknesses of the frameworks, I have build the same application with all these frameworks. In this session I will explain my experience with each framework and try to highlight the good the bad and the ugly. Expect to see code

The demo application can be found on GitHub, https://github.com/flinden68/my-events-demo-application

Transcript

1. #engageug The good, the bad and the ugly a not so objective view on front end development Frank van der Linden Full stack Developer elstar IT 1
2. #engageug About me • Freelance Full stack Java developer • Owner of elstar IT • Curious of new technology • IBM Champion 2
3. #engageug Agenda • Let’s get started • How did I compare • In depth • Lessons learned 3
4. #engageug Let get started 4
5. #engageug 5
6. #engageug 6
7. #engageug 7
8. #engageug Popularity 8
9. #engageug 9
10. #engageug 10 https://academind.com/learn/angular/angular-vs-react-vs-vue-my-thoughts/
11. #engageug How did I compare 11 Actual using the frameworks, says more then a 1000 words
12. #engageug Requirements for events application • Using Bootstrap to makes it look nice • Store data in a datastore • Make use of an API layer • Account authentication • CRUD operations for events • Localisation • State management • Generate an ical file 12
13. #engageug 13
14. #engageug Demo 14 Less is more
15. #engageug Homepage 15
16. #engageug Register 16
17. #engageug Login 17
18. #engageug Event list 18
19. #engageug Account 19
20. #engageug Add event 20
21. #engageug Edit event 21
22. #engageug In depth 22 Look at the differences of localisation
23. #engageug Angular - localisation 23 https://ngstack-translate.netlify.com/#/ change language install npm package create files in specific folder add labels in JSON register module and set default language use labels in HTML
24. #engageug React - localisation 24 https://github.com/ryandrewjohnson/react-localize-redux install npm package create language files add LocalizeProvider to index.js initialise in app add labels in JSON import Translate use labels in HTML change language
25. #engageug Vue - localisation 25 https://kazupon.github.io/vue-i18n/ install npm package register VueI18n in lang.js make vuex file create language files add labels in JSON use the labels in HTML change language
26. #engageug Lessons learned 26 For everything is a npm package
27. #engageug Developer tools 27
28. #engageug VueJS • Recommend Vuex for State management. • Need lots of 3th party npm packages • Recommend Axios as HTTP Client for async calls • Syntax is not that intuitive as I was expecting • Integration of Vuex methods and actions very good • All business logic and presentation in 1 file. • Computed and Watch needed some explanation • Good to use for small parts of an application, but not enterprise ready • Not my preferred framework 28
29. #engageug React • Redux is the standard for State Management • Need lots of 3th party npm packages • Recommend Axios for HTTP Client for async calls • Redux is mind blowing • Was positive surprised by the learning curve • Good development tooling in the browser • Bit messy, with all the logic in one file. • Could support Typescript. • Good to use for small parts of an application, but more enterprise ready then VueJS • Not my preferred framework 29
30. #engageug Angular • Typescript is the standard, which I prefer as Java developer • Big framework, as in a lot of MB’s. • Powerful CLI • Total solution, not that many 3rd party packages needed • Enterprise ready • Like the @Injectables, works the same as the @Annotations in Spring Boot • Webpack is the defacto build manager. • With some tweaking the size of the application can heavily reduced • My absolute favourite framework 30
31. #engageug Overall • Angular is still my favourite • Took some time to get my head around React and Vue • …but after is was easy to add new features • State management is mind blowing. • Get your browser developer tools to see what happening in the frameworks • React and Vue is more loosely coupled then Angular • Pick your favourite IDE, e.g. Visual Code or IntelliJ in my case • Hard to compare, because of their different approaches ;-) 31
32. #engageug Questions 32
33. #engageug Demo Repository 33 https://github.com/flinden68/my-events-demo-application/
34. #engageug Resources • https://reactjs.org/ • https://nodejs.org/en/ • https://vuejs.org/ • https://nodejs.org/en/ • https://www.mongodb.com/ • https://www.mongodb.com/products/compass 34
35. #engageug Reach out to me • @flinden68 • http://www.elstarit.nl • flinden68@elstarit.nl • https://nl.linkedin.com/in/flinden68 35