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