Engage 2019: The good, the bad and the ugly: a not so objective view on front end development
1 like1,314 views
The document presents a personal evaluation of front-end frameworks: Angular, React, and Vue, by Frank van der Linden, a full-stack Java developer. It discusses the advantages and drawbacks of each framework based on practical use, with Angular being favored for its enterprise readiness and TypeScript compatibility. The session also includes a demo and resources for further learning, along with Van der Linden's contact information for follow-up inquiries.
Engage 2019: The good, the bad and the ugly: a not so objective view on front end development
- 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
- 5. #engageug 5
- 6. #engageug 6
- 7. #engageug 7
- 9. #engageug 9
- 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
- 22. #engageug In depth 22 Look at the differences of localisation
- 23. #engageug Angular - localisation 23https://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 24https://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 25https://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
- 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
- 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