Saturday, 29 September 2018

React, Angular, Vue: What they can do and which one is for you

Once you’ve mastered the basics of JavaScript, selecting a front end JavaScript framework can be a difficult, confusing process. You’ve probably heard of React and Angular — now there’s this new thing called Vue?

You don’t have time to learn all three. So, how do you choose?

Whatever you do, don’t overthink it.

You can be successful with any of these frameworks, and learning one framework makes it easier to learn another. Picking a framework is important, but it’s far more important to focus on learning these shared concepts. This will prepare you for whatever you happen encounter in your development.

As you learn everything you need to know about a given framework, you won’t just learn about that specific framework, you’ll also learn about these concepts all three share:

When deciding on which to use, think about your situation or requirements.

If you’re looking to land a job as a developer, what are employers in your area looking for? Do you want to work for a startup or for a more established enterprise? Do a survey of local job openings or talk with a recruiter.

Which framework has the most active local community? Get out and attend a local meetup that’s focused on React, Angular or Vue and meet other developers who are passionate about those frameworks.

If you’re selecting a framework for your team’s next project, what’s the collective skill set for your team? Do you have a lot of general JavaScript knowledge? Would your team benefit from selecting a framework with a gentler learning curve? What features are most important for the application that you’re building?

Ease of Learning

At their core, React and Vue are focused on building user interfaces while Angular is focused on building applications. Because of this, Angular is bigger, more complex and has a steeper learning curve. While they’re initially smaller and less complex, the more that you extend React and Vue the more their size and complexity grows.

Tooling Support

All three frameworks provide CLIs, or Command Line Interfaces. These make it easy to create new projects, support local development and prepare your apps for deployment. All three also have great support within code editors like Visual Studio Code and Atom. To get the best experience and maximize your results, you’ll need to install the appropriate editor extensions.

Performance

While performance benchmarks (i.e. how quickly specific tasks take to complete, such as rendering a list of items) vary for some use cases, each of these frameworks offers similar performance, so this isn’t a significant differentiating factor for most developers or teams.

The Verdict

React

  • Pros
    • Easy, lightweight component creation
    • Elegant API that encourages composition
    • Large supporting community
    • Popular with startups
    • Lots of open-source extensions

React offers easy, lightweight component creation — functional stateless components are about as easy as it gets. Furthermore, React’s elegant API encourages you to embrace composition using components.

React is very popular, evidenced by its large supporting community. React’s popularity has helped to drive adoption with startups. The availability of a wide variety of open-source, community-developed extensions for React gives you lots of options for building out complete solutions.

  • Cons
    • Adjusting to JSX
    • Complete solutions require third-party libraries
    • Availability of options can overwhelm or confuse

Component templates are written using JSX, not native HTML, so you should expect a bit of an adjustment period. Because of its focus on building UIs, you’ll likely need to extend React with third-party libraries. For example, if you need to support client-side routing in your app, you’ll likely use the popular third-party library React Router. Luckily, there are lots of great choices for fulfilling almost any requirement. But having more choices can be overwhelming or confusing—especially for beginners.

Angular

  • Pros
    • All-inclusive framework
    • Guidance on how to build complete solutions
    • Popular with enterprises
    • Capable CLI
    • TypeScript
    • Support for native HTML and CSS

Angular is an all-inclusive framework that provides more “out of the box” than React or Vue. As a result, it provides more guidance on how to build complete solutions. Its focus on application development — evidenced by the inclusion of features like routing and form validation — makes it popular with enterprises.

Angular has the most capable CLI of the three frameworks. It’s used throughout the development of your app to create new components, install packages and run migration and installation scripts. TypeScript — with its static typing and amazing editor enhancements — offers skilled developers who don’t have a lot of JavaScript experience a friendlier transition to client-side development. And while its binding syntax can take a bit to get used to, being able to leverage native HTML and CSS for component templates and styles is a plus.

  • Cons
    • Large API
    • Steep learning curve
    • Code can feel verbose and complex

Angular’s large API and overall approach to developing apps results in the steepest learning curve of the three frameworks. Angular code — with its use of static types, decorators and configuration-based approach — can feel verbose and complex at times when compared to React and Vue.

Vue

  • Pros
    • Easy onramp for developers
    • Grows with you
    • More inclusive than React
    • Support for native HTML and CSS
    • Well written documentation

Vue’s scaled-down experience offers an easy onramp for developers who are newer to client-side development, while still being capable enough to grow with you as your skills develop. And while it’s not as inclusive as Angular, Vue does offer more “out of the box” than React. This makes it a popular choice for beginners.

Like Angular, Vue also allows you to leverage your native HTML and CSS skills instead of needing to learn a new templating language, as you do with React. And it’s known for its well written documentation.

  • Cons
    • Newer than React and Angular
    • Smaller community (for now)

Introduced in 2014, Vue is newer than both React (2013) and Angular (v.1 2010, v.2 2014). So, while its community is growing, it’s not currently as established or as big as the others.

Basic Component Development

What Are Front End Frameworks?

Front-end frameworks enable the development of client-side user interfaces or apps as a collection of components. Components combine data, logic and presentation code into a single container. You can think about your app as a collection of discrete, self-contained pieces.

Let’s take a closer look at basic component development using each of the three frameworks.

Basic Component Development in React

React offers two types of components, stateless functional components and stateful class components.

A stateless functional component is just an ordinary JavaScript function that accepts a single `props` parameter — a properties object — and returns a React element.

function Product(props) {
  return (

{props.name}


  );
}

A stateful class component is an ES2015 class that extends React’s base `Component` class. It contains a `render()` method that returns a React element. Like stateless functional components, stateful class components have properties via the `props` property and, as the name suggests, they also have state via the `state` property.

class Product extends Component {
  state = {
    isSelected: false
  }

  render() {
    return (

{this.props.name}

Is Selected? {this.state.isSelected ? 'Yes' : 'No'}


    );
  }
}

To change the state, you call the `setState()` method and pass in the new state. React will then re-render the component when the state changes.

toggleSelection() {
  this.setState((prevState) => {
    return {
      isSelected: !prevState.isSelected
    };
  });
}

JSX

React components are made of React elements written using JSX. JSX looks like HTML but it’s not markup, it’s a special JavaScript syntax that gives you the full power of JS when writing the rendering logic for your components.

JSX elements can represent DOM elements like <div> and <h1>, or they can represent user-defined React components:



Pet Rock



<Product name="Pet Rock"></Product>



Dynamic values can be rendered as element inner content using a JavaScript expression:




{props.name}


Element attributes can be set using string literals—or a JavaScript expression:


<div className="product-description">...</div>
<img src={props.imageUrl} />



Notice that attribute names mirror their JavaScript property names, not their HTML attribute names. For example, it’s `className` not `class` to set a CSS class on a React element.


To handle an event, you simply wire an event handler function or class method to the element event you want to handle:


addToCart = () => {
  alert('Item added to cart!');
}

render() {
  return (
    <button onClick={this.addToCart}>Add to Cart</button>
  );
}




Basic Component Development in Angular


While it’s possible to develop Angular apps using vanilla JavaScript, most developers use TypeScript. TypeScript provides static typing that helps catch coding errors earlier in the development process. It also supercharges your development experience with true statement completion, in-editor API documentation and symbol-based navigation and renaming.


Components in Angular are ES2015 classes that are decorated with a `Component` decorator:


@Component({
  selector: 'product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent {
}



Decorators are an extension to JavaScript provided by TypeScript. They offer a declarative approach to development that allows you to add metadata to classes, methods, properties and parameters. In the above example, we’ve used a decorator to declare to Angular that this class is a component, and to set the `selector`, `templateUrl`, and `styleUrls` configuration properties.


Component classes can contain any number of properties or methods:


@Component({
  selector: 'product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent {
  name: string = 'Pet Rock';
  isSelected: boolean = false;
}



Unlike React, you change state by directly setting property values:


toggleSelection() {
  this.isSelected = !this.isSelected;
}



Angular detects property value changes and re-renders the component.


Component templates are defined using native HTML, so any valid HTML is a valid template.




Pet Rock


Dynamic values can be rendered to a template using interpolation:




Element attributes and events can be bound to properties and methods defined in your component class. An attribute binding is created by using brackets:


<img [src]="imageUrl" />



An event binding is created using parentheses:






Basic Component Development in Vue


Vue offers a unique scaled-down experience, one dramatically less complicated than Angular and React; you include Vue by using a `<script>` tag and can then start developing your application:






Every Vue application has a top level Vue instance that’s created by instantiating an instance of the Vue class. The application is configured by passing in an options object literal:


const app = new Vue({
  el: '#app',
  data: {
    name: 'Pet Rock',
    isSelected: false
  }
});



The `el` property is a selector for the element where your application will be mounted and the `data` property is an object literal that defines the state for the app.


Methods can also be added. And like Angular, you change the state of your app by directly setting a data property:


const app = new Vue({
  el: '#app',
  data: {
    name: 'Pet Rock',
    isSelected: false
  },
  methods: {
    toggleSelection() {
      this.isSelected = !this.isSelected;
    }
  }
});



Properties in the data object are “reactive” — as their values change, Vue updated the DOM.


The element where your app is mounted defines the template for your app. Like Angular, a Vue template is defined using native HTML so any valid HTML is a valid template:






Pet Rock




Dynamic values can be rendered to a template using interpolation:




Vue provides directives that can used to bind element attributes and events to properties and methods defined in your Vue instance. An attribute binding is created using the `v-bind` directive:


<img v-bind:src="imageUrl" />



An event binding is created using the `v-on` directive:






Vue’s scaled-up experience leverages a front-end build process in order to support a feature called “single file components.” This gives developers an alternative approach for handling larger, more complex applications while still leveraging the skills that they’ve already mastered.


Single file components combine the options object, template, and scoped CSS into a single “.vue” file:


<template>
  <div>
    <h2></h2>
  </div>
</template>

<script>
export default {
  name: 'Product',
  data: function() {
    return {
      name: 'Pet Rock'
    };
  }
}
</script>

<style scoped>
  h2 { color: red; }
</style>



The Conclusion


Trying to decide which of these front end frameworks is the “best” is a little like trying to decide which ice-cream flavor is the “best” — it’s a subjective decision that will vary for each person and situation, and your favorite will likely change over time. Make no mistake — front end web development, like all programming specialities, will continue to change and evolve over time.


The post React, Angular, Vue: What they can do and which one is for you appeared first on Treehouse Blog.





from Treehouse Blog https://ift.tt/2IoXter

via https://ifttt.com/ IFTTT









Posted by



at






















Labels:


















No comments:















Post a Comment


















        

      









Subscribe to:
Post Comments (Atom)