资金云前端培训大纲拆解

@GuoYongfeng 2017-11-14 04:10:46发表于 iuap-design/blog 博客

鉴于项目的开发任务繁重,FE 同学掌握技能的水平不一,希望能够通过相对较为系统的培训支持,让大家能够较快的系统掌握对应开发技术,提升开发水平,现提出以下培训需求:

1.React有代表性的实例讲解,面对各式各样的界面,React设计组件的原则是什么?一般如何划分组件?设计组件的示例
2.前端的开发框架原理技巧,介绍一下uba,以及uba的一些实用的功能,mock、代理等如何使用,以及为什么这样做;
3.redux、高级别的React组件设计使用;Vue、React、Angular的对比分析
4.ES6、ES7的使用经验,好的代码编程方式

培训需求分析和拆解

从以上需求任务分析,需要培训的内容其实主要分为三大块:

  • 语言:JavaScript 新语法规范
  • 框架 / 库:React 相关技术栈
  • 工具:Uba、Webpack、Babel 等

那么,接下来可以很清晰的梳理课程的体系:

  • React Course
  • 前端基础工程化
  • ES 规范和Babel编译器

对于具体内容,现在大家对较为基础的知识需求其实不是很大,所以更需突出的是配合基础的实战经验(跳坑指南、优化、规范、最佳实践等)

1. React Course

  • 概述和对比
    • Vue、React、Angular的对比分析
    • 渐进式学习 React 技术栈的姿势
  • React Fundamental 基础
    • 版本说明、License、资源包的说明(server render)
    • jsx 语法和 babel-preset-react(变量嵌套、属性 data-*、HTML in JS、css 样式定义和className、),本质还是一种 template 模板,但区别在于能力的丰富
    • 定义组件:React.Component、Stateless Component、createClass (deprecated 已废弃,但可通过独立的包引用)、React.pureComponent
    • 数据流管理:Props、State、Context、setState 以及他的渲染时机
    • 组件生命周期管理的艺术、对应的钩子函数、对应的性能优化方式
    • DOM 操作:ref={ node => this.MyDOMNode = node; }、React.createPortal 挂载节点
    • Event 事件机制、arrow function 的应用、bind(this) 的好处
    • Lists and Keys:key 属性和数组方法的应用,根据数据循环输出
      • forms 表单:select、input、textarea、label 等,事件对象 event
    • 一个标准的 React 组件应该如何定义
    • React 编码规范
  • 深入 React Application
    • React 有代表性的实例讲解
    • 面对各式各样的界面,React设计组件的原则是什么?
    • 一般如何划分组件?
    • 设计组件的示例

2. 前端基础工程化

  • Webpack Fundamental & 应用
    • cli
    • loaders
    • plugins
    • config
  • 基础工程化服务 uba 介绍以及原理分析
    • 介绍一下 uba 以及其生态
    • 以及 uba 的一些实用的功能
    • mock、build、Server、proxy等如何使用,以及为什么这样做;

3. ES 规范和Babel编译器

  • ES6/7/8
    • ES6/7/8 常用语法
    • 好的代码编程方式
    • 编码规范
  • Babel 生态
    • core
    • presets
    • plugins
    • polyfill

4. 复杂应用的状态管理方案

  • 不复杂的应用如何管理应用的状态:state、props、context、eventBus事件机制
  • 什么样的业务适合上状态管理的解决方案
  • 状态管理库:Redux、Mobx、rxjs等
  • 基于开源方案封装的开源状态管理方案:dva、mirror、mobx-roof、vanex、ReactiveDB等
  • 初探 Redux 及进阶 ...
  • Redux 在项目中的实践及问题
  • 如何结合 Mirror 推进项目

5. 蜂巢:一站式前端集成开发案

  • 项目开发常见问题分析
  • 蜂巢的由来和产品定位
  • 深入蜂巢的使用和理解
  • React 在服务端的渲染
  • code splitting 代码分割所带来的受益和项目实战方案

6. React Fiber 算法