TechTalks - ReactWeek

Transcript

2. Visual Studio Code IDE for the web
3. Visual Studio Code combines the simplicity of a source code editor with powerful developer tooling, like IntelliSense code completion and debugging
5. VSCode includes built-in support for IntelliSense code completion, rich semantic code understanding and navigation, and code refactoring
6. Visual Studio Code combines the best of web, native, and language-specific technologies
7. Using Electron, VS Code combines web technologies such as JavaScript and Node.js with the speed and flexibility of native apps
8. Developer workflow, tips and tricks
9. React ecosystem and tools (debugging)
10. React and Vue.js side by side
12. Setup project using the default CLIs (create-react-app for React, and vue-cli for Vue) CLI stands for Command Line Interface by the way.
13. Have a look at the file structure of both apps setup using default cli
14. It really comes down to personal preference
15. How do we mutate data? This is where a key difference between React and Vue lies
16. Vue creates a data object, where data can freely be updated React handles this through a state
17. In Vue, you would typically place all of your mutable data for a component inside of a data() function that returns an object with your data inside of it
18. With React — or at least since 2019 — we would typically handle state through a series of Hooks
19. • How do we pass event listeners? • How do we pass data through to a child component? • How do we emit data back to a parent component?
20. React and Vue share many similarities. They both: • utilize a virtual DOM • provide reactive and composable view components • maintain focus in the core library, with concerns such as routing and global state management handled by companion libraries
21. Both React and Vue are exceptionally and similarly fast, so speed is unlikely to be a deciding factor in choosing between them
22. Runtime Performance
23. In React, when a component’s state changes, it triggers the re-render of the entire component sub-tree, starting at that component as root To avoid unnecessary re-renders of child components, you need to either use PureComponent or implement shouldComponentUpdate whenever you can
24. In Vue, a component’s dependencies are automatically tracked during its render, so the system knows precisely which components actually need to re-render when state changes Each component can be considered to have shouldComponentUpdate automatically implemented for you, without the nested component caveats.
25. HTML & CSS
26. In React, everything is just JavaScript. HTML structures are expressed via JSX and the recent trends also tend to put CSS management inside JavaScript as well. This approach has its own benefits, but also comes with various trade-offs that may not seem worthwhile for every developer
27. Vue embraces classic web technologies and builds on top of them
28. JSX vs TEMPLATES
29. In React, all components express their UI within render functions using JSX declarative XML-like syntax that works within JavaScript.
30. Render functions with JSX have a few advantages: • You can leverage the power of a full programming language (JavaScript) to build your view. • The tooling support (e.g. linting, type checking, editor autocompletion) for JSX is in some ways more advanced than what’s currently available for Vue templates.
31. Vue also have render functions and even support JSX. As default Vue offers templates as a simpler alternative. Any valid HTML is also a valid Vue template
32. • Templates feel more natural to read and write • HTML-based templates make it much easier to progressively migrate existing applications to take advantage of Vue’s reactivity features • Makes it much easier for designers and less experienced developers to parse and contribute to the codebase. • You can even use pre-processors such as Pug (formerly known as Jade) to author your Vue templates
33. Some argue that you’d need to learn an extra DSL (Domain-Specific Language) to be able to write templates
34. Scaling Up
35. For large applications, both Vue and React offer robust routing solutions React router Vue Router
36. The React community has also been very innovative in terms of state management solutions (e.g. Flux/Redux) These state management patterns and even Redux itself can be easily integrated into Vue applications. Redux - A predictable state container
37. Vue has even taken this model a step further with Vuex, an Elm-inspired state management solution that integrates deeply into Vue Vuex is a state management pattern + library for Vue.js applications
38. Vue’s companion libraries for state management and routing are all officially supported and kept up-to-date with the core library
39. React instead chooses to leave these concerns to the community, creating a more fragmented ecosystem
40. Being more popular, React’s ecosystem is considerably richer than Vue’s
41. coding, learning, & leveling up one day at a time email: contact@reactweek.dev facebook: https://fb.me/reactweekdev messenger: https://m.me/reactweekdev