preface

Recently, read some foreign language, feel this article modern web development method can also, just translation, and try my best, broken English is very difficult, some with some superficial understanding, if there is misleading, please forgive me, also please correct me passing the teacher more ideas and, if you want to read the original English, can be directly below the sweep at the end of the article 2 d If you want to listen to the audio, just stamp the link

A few tips stand out from the development of modern networks

In this article, I’ll cover the basic concepts, advantages, and disadvantages of using a framework based on single-page JavaScript

First, what is a single-page application?

Let’s take a look at how traditional Web applications work. Typically, a full stack server-side application generates all the data for a Web application on the server itself. Only then can the page be sent to the client before rendering

Single-page Application Overview (SPA)

Content is fetched from the database, passed through the controller, and finally merged with the view template before it is sent

This is reflected in the form of pages that are reloaded each time an application or website is viewed. The role of JavaScript here is very small. It is responsible for controlling only a small part of the user interface

A few years ago, single-page applications became popular among developers. A single page application sends a request to the server for an HTML file framework, along with styles and scripts

At the same time, subsequent requests are made to the server in the form of Ajax requests. The HTML page content itself is rendered in JavaScript and styled using CSS.

The benefit is that we only get part of the content we need, rather than the entire page, which provides less server load and a faster user interface.

Here are the most popular javask-based single page application (SPA) frameworks

  • Angular.js – A client library that connects to static HTML and has a set of properties for data binding
  • ReactJS – component-based client library for building Web applications
  • Vue.js – provides two-way data binding (also seen in AngularJS) and server-side rendering, such as Angular 2 and ReactJS
  • Ember.js – The client library uses the Handlebars template engine to build Web applications
  • Meteor. Js – full stack framework supported by NodeJS and MongoDB. Blaze, Angular, and React are used to template

The 5 best JavaScript Frameworks of 2017

Single-page applications create boundaries between content, logic controller, and presentation. For the MVC framework, it is a separation of concerns

  • Content (Model) – Usually provided in JSON format using REST (which is responsible for combining the code in relation to the underlying data composition, including the storage and reading of the data, the so-called interface data format returned with the background convention)

  • Logical controller (Control) – handles the request and sends the data back to the application. By using HTTP and web sockets processing (responsible for the business logic of the processing system, and need to update the model and view, it makes the model and view does not need direct communication between each other, realize the loose coupling connection between them, the so-called high cohesion and low coupling, modularity, between each other independence, reduce reliance on)

  • Presentation (View) – Controlled by HTML templates that contain template tags to perform tasks such as iterating dataset (responsible for grouping together the code that brings the data held in the model to the screen, essentially working with individual DOM elements)

Summary: Benefits of the MVC pattern

Concerns, will make the code easier to understand and maintain, easier to test, but at the time of writing HTML, we always advocate content and structure style separation is also a certain extent, is the idea, only now is another dimension of development mode, it can make the work with more than of the same project developers according to the application of the model, view and controller. 3 A level of task partitioning, the Vue, presents framework is follow this pattern, but is light, but in fact is not simple, in fact, that is, some of the technologies behind these frameworks what the observer pattern, combination pattern, strategy pattern under the combined application of design patterns, such as the product of the importance of the theory of native js now.. Ha ha

A server-side example

This example shows how we can get and render lists of users at different levels

Let’s start by getting the user’s server-side controller and returning a list in JSON format

/**
 *  Users controller (NodeJS)
 */
const app = express(),
  
/**
 *  This function fetches staff users
 *  from the MongoDB collection
 */
const fetchUsers = (offset = 0, limit= 10) = > {return new Promise((resolve, reject) => {
    Users.find({}, {
      $offset: offset,
      $limit: limit
    }).then((result) => {
      if(error) {
        reject(error);
      }
      else{ resolve(result); }}); }); }; /** * Thisfunction returns a list
 *  of users in JSON format.
 */
app.get('/staff/users', (request, response) => {
  fetchUsers()
  .then((result) => {
    response.status(200).json(result);
  })
  .catch((error) => {
    response.status(500).json(error);
  });   
});

Copy the code

If we ask the server to get some users from https:// yourserver/staff/users, the response is as follows:

[{"name":"Savinda"."location":"Colombo"
  },
  {
    "name":"Thameera"."location":"Colombo"
  },
  { "name":"Andy"."location":"California"
  },
  { "name":"Ian"."location":"New York"}]Copy the code

Client controller

If we used the client controller, the code would look like this:

Template.users = {
  /**
   *    Array to store list of users.
   */
  users: [],

  /**
   *    This event  fires when a template is ready.
   */
  ready: () => {
    fetchUsers();
  },

  /**
   *    Make AJAX request to fetch list of users.
   */
  fetchUsers: () => {
    let request = new XMLHttpRequest(),
      url   = 'https://yourserver/staff/users'

    /**
     *  We make the request...
     */
    request.open('GET', url, true); /** * When the request has completed... */ request.onload = () => { /** * Check the response status code to make sure everything working fine... * /if(request.status === 200) { /** * Assign the response to the list of users. */ this.users = JSON.parse(request.responseText); }}; }};Copy the code

We can render the user from the list using the following code

<template name="user">
  <li>
    {{ name }} is in {{ location }}.
  </li>
</template>
Copy the code

View the template for an MVC application that looks like this to the user:

<html>
  <head>
    <title>
      Single Page Application | Users
    </title>
  </head>
  <body>
    <ul class="list-of-users">
      {{ each users }}
        {{> user }}
      {{ end }}
    </ul>
  </body>
</html>
Copy the code

When the browser first renders the template, it calls the controller to get the user’s template. When the user is crawled, they are automatically presented to the list

Some important concepts

These are some concepts if you’re new to JavaScript client development

  • Controller – Responsible for managing data and additional view files. It also includes the ability to handle the UI behavior of the application
  • Template – AN HTML file that contains special tags to render the content
  • Views – Similar to templates in Use and functionality. However, a view is an overall collection of different components that hold the entire page together
  • Binding – Automatically updates a view’s rendered content when data changes are processed within the view’s controller
  • Routing – This uses HTML5 pushState to deeply link different views when browsing the application
  • Ajax request – Send the request to the server to get the data without reloading the page. Without Ajax, there would be no single page application
  • Web Socket – AN API used to establish a persistent connection between a Web browser and a server. The HTTP protocol requests data and then disconnects

conclusion

The whole article mainly from the traditional web application to modern web applications, which is now popular single-page application development, single-page applications in essence is actually the application of Ajax, is not to change the traditional client-side and server-side data interaction pattern, avoid response is slow, blank page flickering, the entire page refresh criticism, such as to improve the user experience Less pressure on the server side, the view layer (View), control layer (control), data layer (Model) are separated, some page logic control is removed from the server side to the front end to handle, such as routing, server side can only identify the front end OF the HTTP request data, without refreshing the entire page, in the case of the user When certain DOM events (such as clicking, scrolling) are executed, local page refresh presents the presentation of new data. As for deeper understanding, more code is needed. The concept is all story, unreal, pale, and code is the best explanation of the concept theory