前端技术选型参考 ---转

多端
pc

h5 （不要纠结html5 vs h5 vs wap，这里指的是移动端网页）

技术方案
一 pc - 业务类型
细分类型1 重展示、轻交互
典型代表 ：产品展示页

特点 ： 对外展示产品，承载公司对外运营业务，TO C 类居多

要求 ： 稳定，快速，无障碍，高可靠性，兼容性强，强SEO

技术选型 ： node + 模板语言（ejs、pug、handlebar等） + jquery + 其他类库

相对传统的页面开发方案，服务器类型可以选择使用node来实现ssr；如果条件不允许生产使用node服务器，可以考虑模板语言开发环境先做预编译，然后部署到静态服务器上，比如 nginx 。

细分类型2 轻展示、重交互
典型代表 ： 收银台页面

特点 ： 多表单操作、页面结构复杂，局部内容复杂

要求 ： 完成复杂交互，代码简单，容易维护

技术选型 ： node + 模板语言（ejs、pug、handlebar等） + jquery + 其他类库 + mvvm 小型库（vuejs、knockoutjs等）

在处理复杂交互页面时，如果只用jquery，那么处理交互的代码可能会写的比较长，比较难维护。当然jquery是万能的，什么页面都能完成！ 这样的场景，适当引入mvvm库，可以极大减少代码量，更优雅的实现需求。一般来说这样的页面都不会考虑SEO因素。 mvvm的选择有多种，推荐轻量级的 vuejs或者 knockoutjs。如果产品需要考虑兼容老版本IE用户，可以选择knockoutjs，一直可以兼容到 IE6 ；否则推荐使用相对来说更强大的 vuejs。

二 pc - 应用类型
典型代表 ： 运营后台系统

特点 ： 页面UI、交互相近，多表单操作、查询条件因素丰富、列表数据展示、图形报表展示、增删改查等业务操作

要求 ： 统一的UI、交互规则，代码复用率高，交互复杂

技术选型 ： SPA（AngularJs、Angular、Vue、React） + UI库（semantic、bootstrap等）

SPA方案比较多，可以根据团队情况，选择适合的框架或者库。 UI库的选择，除了主流的semantic、bootstrap之外，还有一些国内大厂出品的UI库。

采用SPA方案，最大的目的是

1 使用组件化思想做到代码复用

2 双向绑定解脱js操作DOM工作 （Angular、Vue）

3 单向数据流明晰数据流向 （React）

其中2、3选择互斥。

这类产品的用户主要是公司内部人员，主要使用chrome或者开发人员可以要求用户使用指定的浏览器，那么兼容性不是问题。

三 h5 - 业务类型
典型代表 ： 个人门户

特点 ： 需求持续迭代、TO C 类应用、长期项目、大中型项目

要求 ： 项目代码可维护性，业务隔离，代码足够小，适应移动端复杂的网络环境

技术选型 ： SPA（Angular、Vue、React） + 根据公司UI风格自己构建css库

这类业务，从渲染性能、文件大小等方面考虑，不再建议是用 AngularJs 。 团队可以根据情况，选择 Angular、Vue、React 中的一种。 从业务可持续迭代角度考虑，以上3中框架、库都能使得项目代码规范、组件使用率高、便于长时间维护。这样的项目一般前端开发的人员3人以上，选用这些类库，也便于限制团队代码风格统一。

四 h5 - 活动、营销、专题类型
典型代表 ： 活动页面、专题页面

特点 ： 时效性强，线上运营时间短，多图片展示，业务轻，交互简单

要求 ： 急速打开页面，快速开发上线

技术选型 ： node + 模板语言（ejs、pug、handlebar等） + zeptojs

这类业务要求快速开发上线、线上运营时间短，上线后，没什么bug基本上不会有二次上线。代码相对简单，以展示为主。所以考虑选择简单直接的技术方案。

总结
所有的技术选型，开发环境都离不开 node ，老生常谈的前后端分离就不在这里说了。 生产环境如果使用nodejs，可以直接应用对应的模板引擎或者ssr技术。如果生产环境没有条件使用node，以上技术方案都可以考虑开发环境做模板的预编译成 .html 文件，然后考虑部署到静态服务器或者参与动态服务器打包上线。

以上是经验之谈，仅供参考。

前端技术框架如何选型 以及如何在这个疯狂的前端世界混下去
写在前面的话
哈喽～各位前端狗们！接下来你们将看到一个超级屌的工具集合框架列表（有没有点小激动）。你可以挑你比较熟悉的选项来组织，甚至如果你够屌，就自己造一个轮子，完全不用鸟它们。
这篇博文主要是为了让你了解现在前端圈子里面大家都在玩些啥。 同时也可以作为一个工具清单来帮助你挑选你需要的工具库。
自己会用他吗？
“ 嗯，我用它来做我组装框架的参考～”
当然，这也是我需要给经常问“我该用什么框架的人”说的一些话。你知道的，没有绝对的对和错，但为了治好选择恐惧症，我还是会给出了一个框架以供参考。
最后 我更新这篇文章， 是因为的确有些东西改变了我的想法，让我学到很多。同时，也因为，当你来这里读文章时已经有37个新框架发布了ORZ。。

从何说起？
如果你构建不是一些很小的或者随时可以扔掉的项目，那么你需要这些东西：
模块化你的项目
我偏爱组件化的架构，他适用于各种框架
当然也有一些例外 比如 BOT 或者Elm Architecture 或者 re-frame 或者 CycleJS.
模块加载器/包装器 （RequireJS，Browserify ，Webpack，ComponentJS ，Systemjs）它们能让你的js或者组件 更加解藕易管理
包管理器 npm，jspm, bower
相比而言我更喜欢npm，在js和nodejs世界里面它是一个不成文的标准。
当然，bower 相当于是一种黑科技，它在下载资源库上表现不错，但在组件和依赖管理上还是没有npm的表现抢眼. 当然你可能有不同的观点。
自动化构建工具(grunt/gulp/broccoli)
你懂的，生命有限，没必要浪费重复性的劳动上。
CSS 预处理器 (jss/stylus/sass/css-modules) 以及CSS 后处理器 (csso, autoprefixer, postcss）
这些工具让css丢掉累赘更好的处理跨平台问题 （是的，虽然已经是这么多年了 ，但是还是有很多东西需要我们去帮忙擦屁股）
CSS/HTML框架 (Bootstrap, Zurb Foundation, Elemental UI, Material Lite)

这些吸纳了很多知识和上千年的web开发者痛苦教训的沉淀，它将帮助你解决你的基础标记和样式。

尽管，如果你觉得你是标记语言大牛或着前端砖家，你可能会考虑构建你们自己的解决方案，但是你的确需要去为你们公司建立一个设计字典。

磨刀不误砍柴工，我建议大家尽快去学习 两个方法论 (BEM, OOCSS）；

私心偏爱BEM 的命名体系和 定制的工作流。你可以在这里 Brainly.com 设计指南 找到一些思路帮你构建这个解决方案

如果不知道从哪开始构建你的标定方法论，那就看这里HTML5 Boilerplate

测试框架(jasmine, karma, mocha, tape, intern) 每个人都值得拥有
代码质量审查工具 (eslint, husky, editorconfig).你估计也不想让你的代码乱作一团吧？

一些可以帮助到你的社区(chats, IRC, meetups, twitter)
你不是一个人在战斗。

接下来～

在你开始挑选你的工具并交付你的问题解决方案的时候，有些进阶的问题你要搞清楚，
你需要和其他同学一块完成这个项目吗？他们分别是干啥？ 你需要的是什么？
这个问题的答案，将帮助你选择工具语言和工作流，这于你于公司都是有益的。
我平时工作中注重的是什么？ 代码质量？开发速度？还是可维护性？
这样你就可以明白是否 选用这个工具
我实在处理为核心问题服务吗？
如果是，那么保险起见，就用稳定的技术和框架吧
我需要把我的代码用于第三方吗？
这将缩小你选择技术范围
这是一个偏交互的app还是更多的是静态的文档
这将决定你需要 一个 html+css+tools还是静态网站脚手架或者就是一个CMS
它是一个项目还是一个群族项目
如果你有一群项目，那就需要组件化并且订立规范，最好是以静态文档的形式写下来。
这也为了减少代码过渡重复和稳定统一，同时，也可以把seo及服务端考虑进来
语言清单
当你问答了上述问题，那么是时候讨和你的团队讨论并选择一门语言了
因为，除了疯狂js 的事情， 还有很多需要考虑的。

你有一只写js的团队吗？
可以考虑用ES6 ＋ babel ,它将让你的code 生活更加轻松

你喜欢类型化语言吗？你的小弟们也喜欢咯？
那就 来typescript

你觉得函数式编程OK吗？
你可以小试一下ES6 和一些比如lo-dash 或者ramda。这些库都会有一些教程和书单 伴你前行
你尝试过函数式JS并想玩点有意思的东西吗？
那就试试ELM，的确很屌。。

你更像是一个全栈猴？试试clojurescript.也很屌的!
你是否爱上Scala了？那就scalaJs吧

你知道或者喜欢Haskell？
试试 purescript.你没法想象他有多酷 ?
想更疯狂点吗？
给你个清单 自己看吧

框架清单
如果你需要的仅仅是为了基础工作服务的应用，没时间做太酷炫的东西
那就试试 angular（看看这篇 快速上手.）

如果你们偏重于原型驱动，并且也乐于维护一些未来出现的问题
试试 angular. 准备迎接挑战.

你是一名后端工程师，因为你们的前端狗辞职了，你需要自己构建一个前端项目。
那还是选择angular。同时也要开始找一个前端来帮你了。

你不在乎会缺失部分功能（因为你可以祢补），你就想开工快 构建快。
那就来看看 ampersand/backbone + (挑选适合你的库)

你的项目和大型app拥有相同的配置？
那么添加 marionette/chaplin 到你的 backbone ， 或者可以考虑 ReactJs

你有时间去做尝试，并且考虑长远性能？
那试试mithril/knockout/aurelia + （适合你的库）

你在普世和基础的函数式编程有很好的前端经验？
那就玩 ReactJS + redux + ImmutableJS + …

你需要 更多的函数式编程技法 或者 交互性很强的app?
增加 异步处理流 (bacon, rxJS）或者试试 Cycle.js （试验性的哦）
敬告：让大家用用异步处理流是好事，请奔走相告。不要怀疑函数式编程的异步处理流。
你想用强硬的规范和最佳的实践，你的app可能会变的很大，你扩展你的团队，你有时间投资到学习中?
那你就投资给EmberJs吧，会是个好的投资

你想要有一个像桌面程序一样的app
你的App有表格 图标及其他一些数据分析功能，你想构建企业级应用?

那就ExtJS

你是为别人写东西的外包工作室？
那你应该已经有一些自己的工具集了，那就follow ur heart吧

你是一个自由职业者，为别人写东西？
首先要适应他们的需求，你可以尝试vuejs ，走自己的路让别人痛苦去吧～
注意：如果客户不给钱你就，你就一直让他们痛苦吧。

你需要了解你的app的确切需求（比如 有十个页面的移动应用）？

可以专门用两个星期来试验特殊需求 (ionic, famous, Sencha Touch)

开始编码
花点时间读读你选择的框架的文档
向大牛请教，做一个良好的项目创建者
装配所有的工具
运用黑科技，我建议还是工程师一点。。
效益永远在第一位

还是没有办法用这些怪异的框架开始工作？
那就看看 TodoMVC 例子也可以多照点框架相关的列子多看看，但是请记在心里那些项目仅仅只是一些例子而已.

我不想做决定，你帮我决定吧～

蛋定～
你不想做决定，也觉得emberjs 蛋疼，你觉得你很勇敢 那就 来个串烧吧 ReactJs + Redux + ES6 + webpack + npm + jss + autoprefixer + eslint + Elemental UI + karma 并看看这篇文章。
别再bb 用就好了～～

看到很多人在说ReactJS ,为何这么屌～

它是web开发的未来，有文为证。

很多大牛在用它，你也应该玩玩，我发誓它很好玩的。。
如果它不是我说的这样 你可以回到这片文章下面对我破口大骂～
如果对前端感兴趣，看看这些在线书吧。

最后
16年的旧文了，在日新月异的前端世界里面，可能有些已经过时了，但是还是会有很多帮助。

这是一篇来自《前端杂货铺专栏》的文章，为保护作者的著作权益，请按照作者意愿转载且请注明出处