提醒:本文最后更新于 2018/06/01 ,文中所描述的信息可能已发生改变,请谨慎使用。

先确定好目标再制定提纲。

目标对象

设计师或想要了解前端技术的人。

根据定位的群体,这个教程不会做任何基础知识的详细讲解,只会告知去哪里了解和学习基础知识,通过本教程指导的方法边学边做最终做出来一个简单的小网站。例如使用 Github API 做一个基于 Github Issue 的博客。

最终考虑录成视频。

技术选型

React + Typescript + Redux + RxJS + Docker + (Go)

后面具体介绍一下选择这个选型的理由。

React

https://reactjs.org/ Facebook 开源的一款热门前端库,其核心思想及入门所需要了解的API更简单。对于新手入门来说,需要掌握的核心API越少越方便入门。

Typescript

https://www.typescriptlang.org/ 微软大佬提供的 JS 的超集,其在 JS 的基础上扩充了类型系统,提供在编译时的类型检查功能。对于新手入门来说,使用 Typescript 可以更方便利用 IDE 的代码自动补全提示功能,同时利用编译时的类型检查,帮助新手规避 JS 的一些坑。本文所介绍的相关库均能优秀地支持 Typescript。

Redux

React 的纯粹带来的是API的简洁,但是同时也造成不同使用者编写出风格迥异的代码。Redux 类似 React 仅提供了简单的几组 API,不过在其核心设计思想的约束下,造就了一种模式解决所有场景需求的方法。虽然可能会导致写出较为冗长的模板代码,但模式统一,更便于入门者去掌握和理解。

RxJS

拔高题,了解一下,弄懂他,你就会爱上这个库。

Docker

光写好了代码,不能部署到服务器上给别人看,多可惜啊。用 docker 将写好的代码打包,丢到服务器上"一键"运行,不亦乐乎。

(Go)

这个也是拔高题。

为啥不是 Node.js。因为我不喜欢用 Node.js 做 Web Server。

前文提到了 docker,如果使用 Node.js,一个 docker 的包可能有好几百兆,而使用 Go 做服务器端的逻辑,一个容器几十兆,甚至几兆就可以了。

计划执行

  • 写提纲
  • 开发环境搭建
  • 运行第一个项目
  • 了解 Typescript:使用 MDN 学习 JS API,使用 Typescript 文档学习 Typescript 语法
  • 了解 React:使用 React 官网学习 API,简单介绍 TSX、props、state
  • 了解 Redux:学会阅读 Redux 官方文档,了解 action / dispatch / reducer
  • 结合以上三者实现一个简单的页面切换效果
  • 了解 Docker:学会 pull / push / run 等命令
  • 将编写好的代码发布至服务器
  • 拔高 使用 RxJS 配合以上学到的东西实现一个异步的动画切换效果
  • 拔高 运行一个 Go 服务端,让页面可以获取 Github Issue 的数据

// 2 b continue