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:

"The Sad State of Web Development"

"JavaScript Fatigue"

"X vs Y: There will be blood"

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...

vuejs.org

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/

Made with Slides.com