前端入门

现代前端入门

SPA

旧模式

  • 服务端渲染
  • 请求的是 Html 页面
  • 用 jQuery 来完成对应的动态请求、页面操作

现代

  • SPA,加载的时候可能很耗时,但是切换页面的时候很快
  • Ajax 完成请求,通常是 JSON 格式
  • 有框架,不需要手动对 DOM 操作,会把一定的东西加载到内存中,方便程序更改

ES5/ES6

Js 新标准,可以用 babel 转化

(我打算直接学这个了

User Interface

  • encourages that you write your HTML and CSS in your JavaScript instead.
    • 声明式的转换状态,渲染组件
    • Function: props & state 定义状态
    • Maintainable

只是一个 view layer,很多东西没有那么好解决

预计学习3-4天

状态管理:Flux/Redux

The Flux pattern has the following characteristics:

  • Unidirectional data flow - Makes the app more predictable as updates can be tracked easily.
  • Separation of concerns - Each part in the Flux architecture has clear responsibilities and are highly decoupled.
  • Works well with declarative programming - The store can send updates to the view without specifying how to transition views between states.

Eventually, a clear winner emerged, which was Redux. Redux combines the ideas from Flux, Command pattern and Elm architecture and is the de facto state management library developers use with React these days. Its core concepts are:

  • App state is described by a single plain old JavaScript object (POJO).
  • Dispatch an action (also a POJO) to modify the state.
  • Reducer is a pure function that takes in current state and action to produce a new state.

预计学习4天

CSS Modules

aims to fix the problem of global namespace in CSS

it enables you to write styles that are local by default and encapsulated to your component. This feature is achieved via tooling.

试着使用 Sass 处理你的 CSS

  • 预计学习 3-4天

Testing: Jest + Enzyme

  • Jest 运行已更改文件的测试
  • Enzyme 生成测试

ESLint

类似cargo clippy学半天够了吧,对你的代码进行静态检查

Linting CSS: stylelint

学半天够了吧,对你的CSS进行静态检查

Formatting Code: Prettier

类似cargo format

Types: Flow and TypeScript

给 JS 添加静态类型,学习一天

Build System: Webpack

In a nutshell, webpack is a module bundler that compiles a front end project and its dependencies into a final bundle to be served to users.

We have found the webpack walkthrough by SurviveJS to be the best resource on learning webpack.

学习2天,必学

Package Management: Yarn and Npm

CI: Travis CI

Hosting and CDN

Deployment

Monitoring


学习目标(OKR)

JavaScript

  • 对 JavaScript 语言有比较好的认识:
    • 对 JavaScript 语言机制有了解
      • 阅读 JavaScript 语言精粹
      • 作用域
      • 变量传递
      • 函数定义、执行
      • 闭包
      • 函数四种调用方式以及 this 指向
      • 对象模型
      • 完成 ife 31-end
    • 网络编程
      • fetch Standard (似乎是ajax替代品)
      • WS
      • Jsonp
      • CORS
      • formData
    • ES5/ES6
      • 阅读 ES6 的书: 《深入理解 ES6》
    • 框架
      • zepto
      • Vue/React
  • 对 JavaScript 工程、模块工具有了解
  • NodeJS
  • npm/Yarn
  • 状态管理