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

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
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

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