Web 前端工程入门简介

Web 前端工程入门简介

前言

随着现代化网页（Modern Web）开发专业和复杂性的提升以及对于使用者体验的要求下，网页开发已从过去的 Web Developer 一夫当关，转向专业分工，更加细分成网页前端（Web Front End）、网页后端（Web Back End）等职位。此外，由于跨平台、跨浏览器的需求日益增加，技术变化更迭快速，市场上对于前端工程师（Web Front End Engineer）的需求也与日俱增，前端工程的（Front End Engineering）所要面对的挑战也越来越多。

Web 前端工程入门简介

前端工程范畴

事实上，在目前的业界，前端工程的定位光谱非常广泛，有聚焦在网页设计（Web Design），也有专注在软件工程（Software Engineering）的部份，本书则是将前端工程定位在软件工程的范畴。而 HTML、CSS 和 JavaScript 是前端工程最重要的技术基础。过去一段时间，我们所认为的前端工程主要专注在浏览器平台，但现在的 Web 平台已经不再侷限于桌面浏览器，而是必须面对更多的跨平台、跨浏览器的应用开发场景，其中包含：

  1. 网页浏览器（Web Browser），一般的网页应用程式开发
  2. 透过 CLI 指令去操作的 Headless 浏览器（Headless　Application）。例如：phantomJS、CasperJS 等
  3. 运作在 WebView 浏览器核心（WebView Application）的应用。例如：Apache Cordova、Electron、NW.js 等行动、桌面应用程式开发
  4. 原生应用程式（Native Application），透过 Web 技术撰写原生应用程式。例如：React Native、Native Script 等

过去几年，前端开发就像经历了文艺复兴（Rinascimento）的年代，开始了各种框架、套件百花齐放的时代。虽然现在有更多好用工具可以协助开发，但前端工程师似乎并没有变得比较轻松。以往若能妥善运用 jQuery 等函式库就可以应付大部分前端工程师的工作，但现在前端征才广告上不仅要求精通 HTML、CSS 和 JavaScript，还要对于还要对于 Backbone、Ember、Angular、React、Vue 等 JavaScript 框架或函式库有一定程度的了解。

在众多 JavaScript 框架或函式库中，React 是 Facebook 推出的开源 JavaScript Library，它的出现让许多革新性的 Web 观念开始流行起来，例如：Virtual DOM、Web Component、更直觉的宣告式 UI 设计、更优雅地实现 Server Rendering 等。接下来本书将透过介绍 React 生态系（ecosystem）带领读者入门 React 的世界，让读者可以从零开始真的动手用 React 开发跨平台应用程式。

（image via bsdacademy、firebase）

| 勘误、提问或许愿 |