2017年前端工程师技能规划

2017年前端技能规划

1. 结合公司业务需求，补充、完善、更新自身技术栈；在前端（尤其移动端）方面，做到
   基本功扎实并立足于行业技术前沿；如有余力，熟悉一门后台语言（php，python,java）,以
   更加完善软件开发的知识技能储备。
2. 熟悉，深刻了解公司产品特点及业务需求特征；在保证功能的前提下，做到代码优雅，命名
   规范，逻辑缜密，以提高复用性及方便日后的维护，提高前端开发效率。

3. 技能XMind

   • 技术栈

   类型	主要内容
   Core	html（html5）,css（css3）,js（es6）,component
   UI Frameworks	bootstrap,ionic,mui,
   CSS Preprocessors	sass,scss,less
   JS Frameworks	jquery,zepto,vue/react/angular,three
   JS Preprocessors	babel,typescript
   Back End	node php
   Http Test	Postman
   Template	Jade,Haml
   Code Quality	JSLint,EsLint
   Process Automation	gulp,grunt
   Package Managers	npm,webpack,bower
   Building Tools	webpack,requireJS
   FrontEnd Performance	WebPagetest
   Testing	Karma
   Version Control	git ,svn
   Text Editors	sublime,webstorm

• 熟悉常见软件开发模式

  未来只有两种软件工程师:端工程师+ 云工程师

  分类	内容	备注
  MVC	Model-管理数据，View-视图展现，Controller（backbone没有），Router	2010年，web2.0时代
  MVVM	视图与数据模型强耦合。数据的变化实时反映在 view 上，不需要手动处理	View-Model简化的 Controller,
  SPA	Single-page application	vue,react,angular
  前后端分离	Ajax -前端应用兴起；智能手机 -多终端支持	前端不再是后端 MVC 中的 V，而是单独的一层；REST前后端分离后之间的通信接口
  NODE	JS+操作系统API0	JS成为唯一的浏览器和服务器都支持的语言，前端开发模式的根本改变
  全端	传统技能（JS+HTML+CSS；一门后端语言；移动开发；数据库等	发展成全栈工程师

• 熟悉前端工程化

  前端开发转移到后端环境，意味着可以适用标准的软件工程流程。

1. 持续集成Continuous integration（简称 CI）

   开发代码频繁地合并进主干，始终保持可发布状态的这个过程。
   优点:快速发现错误\防止分支大幅偏离主干\让产品可以快速迭代，同时还能保持高质量

   • 流程
   • 本地开发（developing）
   • 静态代码检查（linting）
   • 单元测试（testing）
   • 合并进入主干（merging）
   • 自动构建（building）
   • 自动发布（publishing）

2. 静态代码检查及测试

   发现语法错误,发现风格错误,自动纠正错误
   Web 应用越来越复杂，意味着更可能出错。测试是提高代码质量、降低错误的最好方法之一。
   测试可以确保得到预期结果。

   • 测试类型
   • 单元测试（unit testing）
   • 功能测试（feature testing）
     功能测试指的是，站在外部用户的角度，测试软件的某项功能。
     与内部代码实现无关，只测试功能是否正常。
     很多时候，单元测试都可以通过，但是整体功能会失败。
   • 集成测试（integration testing）
   • 端对端测试 (End-to-End testing）
   • 以测试为导向的开发模式
   • TDD：测试驱动的开发（Test-Driven Development）
   • BDD：行为驱动的开发（Behavior-Driven Development）
   • 是目前最常用的测试框架：Mocha

3. 移动平台的自动化测试 ,最常见的方案是使用 Appium。
   • 基于 WebDriver
   • 采用 客户端/服务器架构
   • 可以在模拟器运行，也可以在真机运行

• 技术补充资源

  • JS部分
    • A_re-introduction_to_JavaScript
    • ECMAScript 6 入门
    • https://vuejs.org/v2/guide/
    • https://facebook.github.io/react/
    • https://nodejs.org/en/
    • http://expressjs.com/
    • http://babeljs.cn/
    • https://threejs.org/
  • CSS部分
    • http://getbootstrap.com/
    • http://compass-style.org/
  • 前端规范
    • http://www.w3schools.com/
  • 打包工具
    • http://webpack.github.io/
  • 前端自动化
    • http://www.gulpjs.com.cn/
  • 包管理工具
    • https://www.npmjs.com/
  • 其它
    • 数据结构
    • how browsers work
    • https://platform.html5.org/
    • 慕课网