The
Progressive Framework
Evan You
Twitter @youyuxi
GitHub @yyx990803
Oh Front End JavaScript...
Every other day on Quora/Stackoverflow/Reddit:
"Which JavaScript Framework Should I learn?"
Every other month on Medium:
But seriously,
which framework should I learn?
"It depends"
To answer that question, we need to ask more questions:
- How experienced are you?
- How big is your team?
- What type of project are you building?
- What timeframe do you have for the project?
- What are you trying to achieve with this project? Are you building the next Facebook?
Two Schools of Thought
Full-featured Frameworks
Composing Micro-libs
VS.
Two Schools of Thought
Buy into opinionated decisions
Make every decision yourself
VS.
It's more like a spectrum though
Micro libs
Full
Framework
Composing Micro Libs
-
Utmost flexibility
-
A lot of research, decisions and plumbing required
-
May not always end up maintainable
-
Only suitable for experts & tinkerers with strong experience and opinions
Full Frameworks
- Out of the box productivity
- Strong conventions, great for teams that do not want to argue over design decisions
But Full Frameworks are not for everyone...
- High barrier of entry / learning curve
- Inflexible when you disagree with the framework's decisions
- Overkill in many scenarios
The Middleground:
View-layer Centric Libs
- Ready to use when only declarative rendering is needed
- Retains flexibility for higher-level architecture
- Relies on accompanying ecosystem of tooling / support libs to get feature parity with full frameworks
The Middleground:
View-layer Centric Libs
- Ready to use when only declarative rendering is needed
- Retains flexibility for higher-level architecture
- Relies on accompanying ecosystem of tooling / support libs to get feature parity with full frameworks
Innovation is great, but
high churn rate in ecosystem
leads to decision fatigue
Progressive Framework
Framework complexity
vs.
project's inherent complexity.
A progressive framework
adapts to a project's inherent complexity.
Instead of...
"A framework that you can opt-out parts of it"
How about...
"A framework that you can progressively opt-in to"
Progressive Framework
- Lean core that works well alone
- Declarative view rendering
- Official support libraries that solve common needs
- SPA routing
- Data fetching
- State management
- Opinionated but optional build toolchain
- Scaffolding, bundling, linting, testing, hot-reloading, devtools...
Comparison
Vue vs React
"The dirty little secret is that most “modern JavaScript development” is nothing to do with actually building websites — it’s building packages that can be used by people who build libraries that can be used by people who build frameworks that people who write tutorials and teach courses can teach.
I’m not sure anyone is actually building anything..."
- The Internet
Dependencies: 13
Code Size: 113KB
Effort: 80 Hours
React
Dependencies: 22
Code Size: 135KB
Effort: 72 Hours
Angular
Dependencies: 9
Code Size: 49KB
Effort: 48 Hours
Vue
Hello World
<body>
<div id="app">
{{ message }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello from Vue'
}
});
</script>
</body><body>
<div id="greeting"></div>
<script type="text/babel">
var Greeting = React.createClass({
render: function() {
return (
<p>Hello from React</p>
)
}
});
ReactDOM.render(
<Greeting/>,
document.getElementById('greeting')
);
</script>
</body>Vue
React
Free Course
https://www.udemy.com/react-vs-angular-vs-vuejs-by-example/
Vue Overview (Adaptation from Evan)
By genuchelu
