现代前端开发技术栈

2017年-现代前端开发技术栈

Posted by huangqing on August 10, 2017

现代前端开发技术栈

2017 年 JavaScript 生态系统一览

定义和整合一些关键的概念和理论,以确保我们的决策有助于解决我们在开发前端软件时所预料到的挑战:

  • 利用 JavaScript 语言提供的最新功能来支持更优雅、一致和可维护的代码(比如import/export (modules)、class 和 async/await)。
  • 提供一个稳定成熟的、低到无需维护的(即,开发人员不需要安装或维护全局的开发依赖,且具有直观的工作流/任务流)本地开发环境。
  • 利用包管理器来管理前端构建依赖。
  • 部署优化过的、基于功能特性的 bundles(已经打包了HTML、CSS和JS),为用户提供更智能、更快速的分发和下载。结合 HTTP/2,可以获得小投入大产出的效果,可以大大提高用户体验和产品性能。

技术栈

  • HTML (整洁代码,语义化标签)
  • CSS (模块化,可伸缩)
  • CSS 方法 (BEM, SMACSS, OOCSS)
  • CSS 预处理器 (像LESS, SCSS, PostCSS)
  • 现代 CSS (Flexbox, Grid)
  • JS
  • 现代 JS (ES6, Typescript)
  • JS 框架 (Angular, React, Vue)
  • JS 方法 (函数式编程, 面向对象)
  • JS 库 (Immutable, Ramda, Lodash)
  • 响应式设计原则
  • 测试 (TDD)
  • 测试框架 (Jasmine, Karma)
  • SVG
  • WebGL
  • 动画技术
  • 可访问性
  • 可用性
  • 性能
  • 构建工具 (Grunt, Gulp, NPM 脚本)
  • 资源打包工具 (WebPack, Browserify)
  • NPM 生态系统
  • 了解不同浏览器的怪癖
  • 敏捷方法
  • 版本控制 (通常是 Git)
  • 视觉设计基础
  • 软技能,时间管理
  • 对使用的后端语言有基本的了解。

还要涉足或展望这些技术

  • Service workers
  • Progressive Web Apps (PWA)
  • Web组件化

花时间来学习编程的设计模式架构技术,相比于投入在当前火的框架,在长远上来看,总是更有益的。

其他

  • 高并发: 通过分布式部署和多级负载均衡等技术解决了业务的高并发问题。
  • 高可用: 通过主从架构等技术解决了业务的高可用问题