Tom Ruys - Javascript: ReactJS and VueJS

An example of choosing and applying ReactJS to a Startup Application, with a quick comparison to VueJS.

Transcript

2. Tom Ruys Freelance Design Technologist www.tomruys.nl
3. Tom Ruys Presentation Other
4. www.slido.com CFRV
5. Milkshake App Co-Founder www.milkshake-app.com Milkshake App
6. Venue Owner Milkshake App Musician Users
7. Milkshake App Problem
8. Milkshake App Currently
9. Milkshake App Solution
10. Milkshake App www.milkshake-app.com Demo
11. ReactJS Milkshake App Redux React Native NodeJS
12. ReactJS Milkshake App Redux React Native NodeJS ! =
13. Milkshake App Syntax HTML/CSS Easy Start Flexible Fast Light State / Props Data Handling Powerful
14. Milkshake App Profile.js Profiles.js
15. Milkshake App Profile.js Profiles.js
16. Milkshake App Profiles.js Profiles.js { collection: [ … ] }
17. Milkshake App Profile.js { name: “...” photo: “...jpg”, ... } Profile.js
18. Milkshake App Profiles.js Profiles.js <ul> <Profile profile={profile} /> <Profile profile={profile} /> <Profile profile={profile} /> </ul>
19. Milkshake App Profile.js <li> <img src={this.props.profile.photo} /> <h1>{this.props.profile.name}</h1> </li> Profile.js
20. Milkshake App Profile.js <li onClick={this.onClick}> ... </li> onClick(e) { this.setState({ expanded: !this.state.expanded }); } Profile.js
21. Milkshake App Profile.js <li onClick={this.onClick} className={this.state.expanded ? s.expanded : ‘’}> ... </li> Profile.js
22. Milkshake App Props & State State Props <Profiles /> <Profile /> State Props
23. Milkshake App Components <App /> <Profiles /> <Profile /> <Navigation />
24. Milkshake App Redux
25. Milkshake App Front-End Back-End
26. Milkshake App Front-End <App /> <Profiles /> <Profile /> <Navigation /> expandProfile () { ... } Redux State
27. Philips Freelance Design Technologist Philips
28. Syntax “All” in HTML! Easy Start Super Light Fast Lighter Quick Start Simple Plug & Play Philips
29. Philips Prototyping
30. Philips Simple? <ul> {this.props.profiles.collection.map((profile, index) => ( <Profile key={index} profile={profile} /> ))} </ul> <ul> <Profile v-for="profile in profiles.collection” :profile=“profile” /> </ul> Simple!
31. Philips Plug & Play var vueApp = new Vue( { el: '#vueApp', data: { profiles: { ... } } methods: { ... } });
32. Tom Ruys React vs Vue (Slightly Smaller) Projects Plug & Play Easy and Simple Super Light (Slightly Larger) Projects State Management Well Documented Light
33. Tom Ruys React & Vue Virtual DOM Lifecycles Component Based Lightweight &
34. Tom Ruys More Topics? React & Vue Lifecycles React Native React vs Vue vs Angular? Steven Straatemans React developers will love the Vue Composition API https://medium.com/frontmen/react-developers-will-love-the-vue-composition-api-91424d221419
35. Tom Ruys Freelance Design Technologist www.tomruys.nl Add me on LinkedIn: /tomruys Icons by: Raj Dev
 @ freeicons.io