3.0 Research - GiovanniKaaijk/frontend-applications GitHub Wiki

Together with the team we did some research on React. Note: only the popularity is my own research, the rest is of my team.

JSX (Javascript xml)

JSX is not both a String and HTML. JSX is a syntax extension on JavaScript and looks a bit like a template engine. JSX helps you write HTML within responding.

JSX in responding is not required. Most people choose to work with JSX because JSX serves as a visual tool when working in JavaScript.

JSX is ultimately compiled into javascript. This means that you can use conditional logic within jsx

JSX represents objects.

Popularity

Benefits:

  • Clean programming
  • Strong community (many packages)
  • Fast performance (virtual dom)

Popularity:

  • Ranks # 3 in the most popular frameworks (2018)
  • Ranks # 2 in the most popular frameworks / libraries / tools
  • Ranks # 1 in most wanted frameworks / libraries / tools

stateofjs.com survey (2018):

  • 64.8% used React and would use it again
  • 6.7% of users would no longer use it

Virtual DOM

Real DOM versus virtual DOM The real DOM is the normal DOM that is loaded when you load a webpage. React has a virtual DOM, which means that when you create a status in React, that status can change. Every time something updates the status, only the virtual DOM is updated and not the real DOM.

Render

render () is where the user interface is updated and displayed. render () function is the point of entry where the tree with React elements is created. When a status or object in the component is updated, render () returns a different structure with React elements. If the setState () is used in the component, React immediately detects the status change and displays the component again.

Separation of rendering & logic

Everything in the field of rendering and logic is clearly explained in this React guide, so you must follow this guide

  • Rendering and logic are close together in React.
  • Elements are the smallest building blocks within React applications.
  • “Unlike the DOM elements of your browser, React elements are ordinary objects and they are cheap to make. React DOM ensures that the DOM is updated to match the React elements. "
  • React elements are unchangeable, when they are created, you cannot change the characteristics or children afterwards
  • Respond only to the data / elements that have changed since the last update.

Benefits React

  • Virtual DOM makes the UX a lot easier, so developers can work in it faster.
  • In response you can work with components, which means that changes to the child do not affect the parent.

Cons Respond

  • Lots of boilerplate code needed to set up a project.
  • React is based on JSX, which requires more knowledge than, for example, Vue.

Respond to components

React is a declarative, efficient and flexible JavaScript library for building user interfaces. This allows you to assemble complex UIs from small and isolated pieces of code called 'components'.

A component registers parameters, called props (short for 'properties'), and when executed, you get a hierarchical layout that is divided into content blocks. The execution is done by the render method.

Respond & the MVC story

What is MVC?

MVC is a design pattern that is used in web applications and software to divide system logic into 3 "interconnected" elements.

Model

The central component of the pattern. It is the dynamic data structure of the application, independent of the user interface. [5] It deals directly with the data, logic and rules of the application. View Any representation of information such as a graph, diagram or table. Multiple views of the same information are possible, such as a bar chart for management and a table view for accountants. Controller Accepts input and converts it to commands for the model or display. [6]

How is MVC different from React's architecture

  • React uses an architecture called FLUX.
  • Flux works slightly differently from the MVC model, but there are many similarities. The developers of React claim that the model is not an MVC, but many developers claim that this is one of the first correctly implemented MCV models.

The main difference is the following:

MVC:

FLUX: “View conversations here via a component called Dispatcher. Actions are generated by user-generated events such as clicks or key presses. Dispatcher extracts what information this promotion needs to update and sends it to the Application Store for further processing. Application Store contains all status information of the application. It can also communicate with the server for updates. Updates for the store are listened to by the view which in turn updates itself. "

Why frameworks?

Prescribed code

JS frameworks are collections of JavaScript code libraries that provide developers with pre-written JS code to use for routine programming functions and tasks - literally a framework to build websites or web applications. (Https://skillcrush.com/2018/07/23/what-is-a-javascript-framework/)

Easy to update

Creates a virtual DOM; When you update that content, instead of rendering the entire element again, an "other" algorithm would make a virtual DOM map of the new content, compare it with the old one, and then update only the things that have changed . (Https://gomakethings.com/when-you-actually-should-use-a-javascript-framework/)

Works with modules

Individual pieces of code that are mentioned. Editing something does not break the entire code.