Front-end engineering

  • All arms: Increase [combat power] by engineering

What is engineering?

  • A project is a project (e.g. a website or APP)

The life cycle of a project

  • Engineering project
  • Demand analysis
  • prototype
  • Develop and implement
  • Test the deployed
  • And running

What is engineering?

  • Engineering is to complete the project process, use a variety of tools and techniques.

What is front-end engineering?

  • Front-end engineering is the process of improving front-end development efficiency through various tools and technologies.

Front-end engineering content: various tools and techniques

  • Scaffolding tool
  • Compression tools
  • Automation tool
  • Conversion tool
  • Formatting tool

Front end engineering

  • Improve development efficiency by using tools

conclusion

  • Learning front-end engineering means learning how to use various tools to solve various problems in front-end development.

Problems solved by front-end engineering

  • Compress the code before the project goes live
  • Convert new ES6+ or CSS3 features
  • Want to use Less to enhance the programmability of CSS, but browsers cannot support Less directly (there is no Less engine, only CSS)
  • Formatting code (multi-party collaborative development, code style cannot be unified)

Node.js

The foundation of front-end engineering

Node. Js

  • Node.js was written by Ryan Dahl.

What is a node. Js?

  • Node.js official website: node.js.org

JavaScript runtime environment

  • A browser is a runtime environment for JavaScript
  • Node. js is based on Chrome V8 engine.
  • Node.js is an environment in which you can run JavaScript in addition to a browser.

The development of javaScript

  • 1995: Browser (javaScript)
  • 2009: Node.js(javaScript)

Browser Composition

  • As shown in the figure below

  • The composition of the browser kernel

  • Components of the browser kernel (details)

  • Major Browser kernels

Software architecture

  • The operating system
  • Runtime environment
  • A programming language
  • The framework

  • Software architecture corresponding to the Web application

  • Software architecture versus Web application metaphor

conclusion

  • Node.js is neither a new language nor a JavaScript framework, but a runtime environment.

What can Node.js do

  • Node.js gives JavaScript the wings of full-stack programming

The role of JavaScript

  • The browser (JavaScript) is responsible for the front-end functions
  • Node.js (JavaScript) is responsible for the functionality of the back end

Browser-side JavaScript

  • Responding to browser events
  • Data validation
  • DOM manipulation
  • And so on…
  • Cannot do file operation

The Node to the JavaScript

  • Node.js is suitable for: a variety of tools for developing the front-end direction
    • A variety of front-end engineering tools
  • Node.js is suitable for: developing server-side application layer (BFF)
    • Provide data services for websites, APPS, small programs, etc
  • Node.js can be used for desktop application development
    • Various cross-platform desktop applications (vscode, typora, insomnia)

Node.js APIs

contrast

The web component of JavaScript

JavaScript node component

The intersection of the two

  • generally

  • segmentation

Installation node. Js

Download the Node.js installation package from the official website

Double click Install to go to Next Install

Verify that the installation is successful

  • Open the command line: win+r, enter CMD and press Enter
  • On the cli, enter node -v
  • If the version number is displayed, the installation is successful

The use of the Node. Js

  • Run JavaScript code through Node.js

Node.js has two modes for running JavaScript

Script mode

> node path/filename.js(enter)Copy the code

Interactive mode

  • Go to Interactive mode > Node (Enter)
  • Run code > js code (Enter)
  • Exit interactive mode >.exit or press CTRL + C twice

Run JavaScript shortcuts in Node.js

  • Use code from the command line to open the current folder in vscode.
  • CTRL + ‘opens the command line of the editor

Script mode

Interaction mode (REPL)

  • Use the TAB key to automatically complete data
  • Explore JavaScript objects (e.g. Math. Then hit TAB twice)
  • Click the command (for example, type.help and press Enter)

Global object

  • The global object under Node.js is global
  • In browser-side JS, the global object is window

The global object under Node.js is global

  • In interactive mode, declared variables and functions belong to Global

  • In script mode, declared variables and functions are not part of global

  • Window (the browser’s global object) cannot be accessed in Node.js

  • Extension: not only can’t access window, document\location, etc., it can only access the intersection between them.

Global function

Global functions under Node.js

  • Global functions provided by the javaScript language are still available under Node.js.
    • parseInt/parseFloat/isNaN/isFinite/eval…
    • One-time timer (setTimeout/clearTimeout) -> time bomb
    • Periodic timer (setInterval/clearInterval) -> Alarm
  • The Node.js environment also provides some global functions
    • SetImmediate/clearImmediate
    • The process executes the timer immediately (process.nexttick)

Synchronous and asynchronous

  • Main program (single thread)
  • The event queue
  • (The nextTick event is executed after the main program, while setImmediate is executed at the beginning of the event queue)