-
Notifications
You must be signed in to change notification settings - Fork 0
Design Principles of Vue 3.0
Yongku cho edited this page Dec 22, 2019
·
13 revisions
https://www.youtube.com/watch?v=WLpLYhnGqPA&feature=youtu.be
- Beginners just progressing from HTML & CSS
- Professionals moving an from jQuery
- Veterans migrating from another framework
- Backend engineers looking for lightweight frontend solution
- Architects choosing the foundation for entire organization
- Sprinkling interactivity onto legacy applications
- One-off projects that demands fast turn-around but no long-term maintenance concerns
- Medium scale projects where complexity cap is predictable
- Large scale projects expected to last for years, with team movement
- API optimized for "easy-ness" leads to maintainability issues at scale
- Heavy tooling raises barrier of entry and limits use cases
- More features leads to more bloat
Why introduce "another way of doing things?"
- Intuitive and easy to get started with
- Scalability issues in large scale applications
- Purely additive
- Can be used alongside Options API
- Provides more flexible code organization & logic reuse capabilities
- Provides excellent TypeScript support
Is TypeScript really necessary?
- Pro: excellent IDE support for auto-completion and type information
- Pro: confidence when refactoring old code in large projects
- Cons: learning cost
- Cons: slower initial development
- TypeScript definitions benefit JavaScript users as well
- Component code using TypeScript and JavaScript will look largely the same
- Although Vue can ensure minimal updates at the component tree level, it's still a full diff inside each component instance.
- The performance of traditional VDOM is determined by the total size of the template rather than the amount of dynamic content in it.
- Fully dynamic render logic makes it very difficult to make safe assumptions about user intent for maximum AOT optimization.
- With the new strategy, update performance is determined by the amount of dynamic content instead of total template size.
every new feature increases bundle size of every user
- Most Global APIs and internal helpers are provided as ES modules exports (tree-shakable)
- The compiler generates tree-shakable code for your template as well
- Don't pay for features you never use
- Libraries vs. Framework
- Primitives vs. Abstractions
- Bazaar vs. Cathedral
- Fewer concepts to get started with
- More flexibility and more userland opportunities -> active ecosystem
- Smaller maintenance surface -> team can focus on exploring new ideas
- More plumbing work needed when solving inherent complex problems with simple concepts
- Patterns naturally emerge over time and become semi-required knowledge, but often not officially documented.
- Ecosystem moving too fast can lead to fragmentation and constant churn
- Most common problems can be solved with built-in abstractions
- Centralized design process ensures consistent and coherent ecosystem
- Higher upfront learning barrier
- Inflexible if built-in solution doesn't fit use case
- Larger maintenance surface makes introducing fundamental new ideas much more costly
- A layered design that allows features to be opted-in in a progressive manner
- Layer
- Declarative Rendering => Component System => Client-Side Routing => Large Scale State Management => Build System => Client-Server Data Persistence
- Low entry learning barrier
- Documented solutions for common problems
- The same coherent experience as Vue 2
- Router, Vuex & test-utils will receive respective updates to align with this vision
- Even more lower-level flexibilities
- First-class custom renderer and custom compiler APIs