Zak Dyer

Zak Dyer

1554100034

Why use a framework like Angular, React & Vue?

#javascript #angular #vue-js #reactjs

What is GEEK

Buddha Community

Edward Jackson

1554100349

Modern front end frameworks like Angular, React & Vue makes development work easy but often at the cost developers’ understanding of their code. Behind the boilerplates, what exactly is the code trying to do? How does it do it? When the code fails, will the coder be able to reason out step by step how the code fails and debug? Or do we just rely on Stack Overflow without understanding anything?

To understand modern frameworks and the problems they try to solve, it will be helpful to revisit how code was written before modern frameworks took over. Using the granddaddy of front end frameworks jQuery, I will show you why writing good front end code is hard and the tricks modern frameworks play to allow us to write optimized production-ready code without putting in much thought.

Let’s us start by saying that jQuery was and has always been an awesome tool. It was designed to do just one thing DOM traversal & DOM manipulation and does that one thing really really well. However,

With great power comes great responsibility. With the power of jQuery, writing bad code become really easy for a novice developer.
We’ll start with the example of a simple counter app:

This can be implemented with a just few lines of jQuery: we basically bind an event handler to the button that increment the count on each click.

<div class="counter">
  <span>0</span>
  <button>+</button>
</div>

counter.html hosted with ❤ by GitHub

$('button').click(() => {
  const $target = $('span')
  $target.text(+$target.text() + 1)
})

counter.js hosted with ❤ by GitHub

Simple… but far from ideal.

Avoids storing state in DOM

The first thing we notice here is that count state is stored within a DOM object. As we all know, DOM operations are slow in comparison with modifying a JS variable in-memory. We can improve our code by keeping count state inside the JS world.

let count = 0

$('button').click(() => {
  const $target = $('span')
  $target.text(++count)
})

counter.js hosted with ❤ by GitHub

Avoids storing state in global

This solves the problem of storing state in DOM but solves it by creating a global variable. What if we have multiple copies of the counter in our app each polluting the global namespace with its own state variables. We can avoid this problem by carefully using factory functions to setup our counters. In another word, encapsulation.

createCounter($('counter'))

function createCounter ($el) {
  let count = 0

  $el.find('button').click(() => {
    const $target = $el.find('span')
    $target.text(++count)
  })
}

counter.js hosted with ❤ by GitHub

To be able to write code like this one has to be familiar with JS scope and closure. At this point you can see writing good jQuery code is non-trivial. But we are not done yet.

Avoids unnecessary DOM traversal

Each call to the event handler runs $el.find('span') : an unnecessary DOM traversal step. Recall earlier we said something about minimizing DOM operations? Ours might be a simple case where optimization like this doesn’t make much of a difference but imagine a more complicated component where your target node is nested many layers deep. When you call jQuery’s $el.find or browser’s $el.querySelector the browser have to scan the entire tree starting from your root node to return the nodes matching your selector. So as much as possible, we should keep references to our target node in JS world rather than re-fetching it every time with DOM traversal.

createCounter($('counter'))

function createCounter ($el) {
  let count = 0
  const $target = $el.find('span')

  $el.find('button').click(() => {
    $target.text(++count)
  })
}

From all this, you see even writing the simplest counter app requires the discipline of a Jedi master in order not to introduce little inefficiencies that add up as our app grew bigger and bigger. That is why modern frameworks like Angular, React & Vue came in to abstract away these optimization work and let us focus on what our app is supposed to do and not how it does it.

Declarative vs Imperative programming

When Angular first came into the scene with concepts like templates and directives, it opens up a new way of building web applications. The declarative way vs the imperative way that older frameworks like jQuery and D3 are based on. You specify a template telling Angular the places where your data go and Angular under its hood handles

  1. spinning out all your DOM elements
  2. injecting data where they are supposed to be (data binding), and
  3. updating the DOM when state change (data reactivity).

Along came React, introducing us the concept of components and the “right” way of doing data reactivity — the one-way data flow. Imagine for any decent sized app, events that are triggered on one element often leads to state change that affects more than one element. One update can lead to other updates on elements whose data has dependency on the initial element that has changed. Thus one action could trigger a cascade of updates and DOM manipulations.

Taming then O(n²) complexity

Back to our counter example. Say we turn it into a simple calculator:

<div class="calculator">
  <div>A x B = C</div>
  <div>
    <span class="a">1</span> x
    <span class="b">1</span> =
    <span class="c">1</span>
  </div>
  <div>
    <button class="a">+A</button>
    <button class="b">+B</button>
  </div>
</div>
let a = 1, b = 1

const $a = $('span.a')
const $b = $('span.b')
const $c = $('span.c')

$('button.a').click(() => {
  $a.text(++a)
  updateC()
})

$('button.b').click(() => {
  $b.text(++b)
  updateC()
})

function updateC () {
  $c.text(a * b)
}

Just adding a second counter and a third element whose state is dependent on both counters, our code now increases from 4 lines to 20 lines. From one trigger and one update, we increased to 2 triggers and 4 updates. What we are seeing here is that with imperative programming, complexity often do not increases linearly with the number of elements. The following diagram succinctly explains this effect:

On the left we have our “usual” jQuery app; Looks like the beginning of spaghetti code. On the right is the preferred architecture. However implementing a pub-sub global state object is non-trivial. But the nice thing is: almost every modern frameworks have this mechanism built-in in some form.

We have yet to talk about the case of avoiding DOM updates when state change does not lead to a “visible” change.

Avoids unnecessary DOM manipulation & Updating the DOM JIT

What are the cases of non-visible state change?

  1. spinning out all your DOM elements
  2. injecting data where they are supposed to be (data binding), and
  3. updating the DOM when state change (data reactivity).

Beside Component Thinking, the other major innovation brought on by React was the Virtual DOM. It is meant to addresses the first point. When a state change triggers update in the DOM tree, you don’t want to tear down the whole DOM tree and rebuild everything. But this is exactly what we often do with jQuery code. What we should be doing instead is to reuse existing DOM nodes as much as possible, work out exactly which part need to change, then batch all these actions to run just before the render cycle kicks in. How virtual DOM works is explained as follows:

The virtual DOM can be understood as a stripped down JS representation of your DOM. Because the entire data structure resides in JS world, accessing the nodes and modifying values on them can be performed many, many times faster. When it is time for rendering, all we need now is perform a diff between the old (virtual DOM) tree and the new tree to figure the minimum set changes we need to get the actual DOM to reflect the updated state.

One final optimization comes from batching changes to match the screen refresh rate. While state change can take place multiple times within one frame, the diff-ing and actual DOM manipulation happens exactly once per render cycle; just before screen refresh. So the second point is also addressed. To do this without using a modern framework requires us to diligently insert window.requestAnimationFrame all over our code thus in practice developers seldom do this.

In summary…

Modern frameworks performs numerous optimizations under their hood allowing us to offload the difficult task of writing good performant code so we can free ourselves to build richer app experience and iterate through features faster. They do so by:

  1. spinning out all your DOM elements
  2. injecting data where they are supposed to be (data binding), and
  3. updating the DOM when state change (data reactivity).

Learn More

Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

Angular 7 (formerly Angular 2) - The Complete Guide

Angular & NodeJS - The MEAN Stack Guide

React - The Complete Guide (incl Hooks, React Router, Redux)

Modern React with Redux [2019 Update]

React vs Angular: An In-depth Comparison

Build Progressive Web Apps with React

Comparing the React and Vue Ecosystems with a Real-World SPA

Learn ReactJS with Webpack 4, Babel 7, and Material Design

Building a Desktop App with Vue: NW.js

Autumn  Blick

Autumn Blick

1598839687

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

  • Performance: It delivers optimal performance.
  • Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
  • UI design: React Native enables you to design simple and responsive UI for your mobile app.
  • 3rd party plugins: This framework supports 3rd party plugins.
  • Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

  • Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
  • Near-native user experience: React Native provides several native components, and these are platform agnostic.
  • The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

Ollie  Dietrich

Ollie Dietrich

1632083580

Comprehensive Look At Angular, React and Vue.js

There is no doubting the fact that web development and custom software development has been on a thriving technological ride in previous times several years. And when it comes to the frontend, JavaScript has been at the helm of this drive.

 

This popularity has given increase to tons of JavaScript frameworks along the way. Deciding on a JavaScript framework for your web app can be overwhelming. Angular and React are very well-known these days, and there is a younger which has been getting a lot of traction lately: VueJS.

The aim of this video is to take a comprehensive look at such widely used frameworks – #Angular and #Vue – and one library – #React.

And also share your opinions on these three in the comment section.

 #javascript #angular #vue #react-native 

Luna  Mosciski

Luna Mosciski

1600583123

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework.

Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.

Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.

Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You

#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js

Carroll  Klein

Carroll Klein

1590192780

JS frameworks: React, Angular, or Vue? Consider the pros and cons

In this tutorial, we will discuss three of the most popular javascript frameworks: React, Angular, and Vue. We will look at the pros and cons of each, their usage statistics, discussions about which one to choose, and which one should be studied for future use. Because programming languages and frameworks are all tools in a developers tool belt, and each has its place. It is worth learning tools you find meaningful, useful to accomplish a task that’s not only convenient, but is suitable for specific tasks. Again, we should remind ourselves that because these changes occur rapidly, after a year and a half a year, the situation can radically change.

#angular #react #vue #vue.js #react-native

Why the industries are choosing to react instead of angular - INFO AT ONE

Angular JS is a typescript-based application developed by Google. It’s an open-source web application framework, specifically made for the front end Web developers. As we know that the Angular is created by Google it gets very good support from Google and some individual communities of developers.

Read More:- https://infoatone.com/why-the-industries-are-choosing-to-react-instead-of-angular/

#angular #angular and react #js cons of angular #cons of react js #difference between angular and react js #pros of react js