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

 

多端

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）

其中二、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。。

从何提及？

若是你构建不是一些很小的或者随时能够扔掉的项目，那么你须要这些东西：

1. 模块化你的项目
   我偏心组件化的架构，他适用于各类框架
   固然也有一些例外 好比 BOT 或者Elm Architecture 或者 re-frame 或者 CycleJS.
2. 模块加载器/包装器 （RequireJS，Browserify ，Webpack，ComponentJS ，Systemjs）它们能让你的js或者组件 更加解藕易管理
3. 包管理器 npm，jspm, bower
   相比而言我更喜欢npm，在js和nodejs世界里面它是一个不成文的标准。
   固然，bower 至关因而一种黑科技，它在下载资源库上表现不错，但在组件和依赖管理上仍是没有npm的表现抢眼. 固然你可能有不一样的观点。
4. 自动化构建工具(grunt/gulp/broccoli)
   你懂的，生命有限，不必浪费重复性的劳动上。
5. CSS 预处理器 (jss/stylus/sass/css-modules) 以及CSS 后处理器 (csso, autoprefixer, postcss）
   这些工具让css丢掉累赘更好的处理跨平台问题 （是的，虽然已是这么多年了 ，可是仍是有不少东西须要咱们去帮忙擦屁股）
6. CSS/HTML框架 (Bootstrap, Zurb Foundation, Elemental UI, Material Lite)
   
   这些吸纳了不少知识和上千年的web开发者痛苦教训的沉淀，它将帮助你解决你的基础标记和样式。
   
   尽管，若是你以为你是标记语言大牛或着前端砖家，你可能会考虑构建大家本身的解决方案，可是你的确须要去为大家公司创建一个设计字典。
   
   磨刀不误砍柴工，我建议你们尽快去学习 两个方法论 (BEM, OOCSS）；
   
   私心偏心BEM 的命名体系和 定制的工做流。你能够在这里 Brainly.com 设计指南 找到一些思路帮你构建这个解决方案
   
   若是不知道从哪开始构建你的标定方法论，那就看这里HTML5 Boilerplate
   
   
7. 测试框架(jasmine, karma, mocha, tape, intern) 每一个人都值得拥有
8. 代码质量审查工具 (eslint, husky, editorconfig).你估计也不想让你的代码乱做一团吧？
   
   
9. 一些能够帮助到你的社区(chats, IRC, meetups, twitter)

你不是一我的在战斗。

接下来～

在你开始挑选你的工具并交付你的问题解决方案的时候，有些进阶的问题你要搞清楚，

1. 你须要和其余同窗一块完成这个项目吗？他们分别是干啥？ 你须要的是什么？
   这个问题的答案，将帮助你选择工具语言和工做流，这于你于公司都是有益的。
2. 我平时工做中注重的是什么？ 代码质量？开发速度？仍是可维护性？
   这样你就能够明白是否 选用这个工具
3. 我实在处理为核心问题服务吗？
   若是是，那么保险起见，就用稳定的技术和框架吧
4. 我须要把个人代码用于第三方吗？
   这将缩小你选择技术范围
5. 这是一个偏交互的app仍是更多的是静态的文档
   这将决定你须要 一个 html+css+tools仍是静态网站脚手架或者就是一个CMS
6. 它是一个项目仍是一个群族项目
   若是你有一群项目，那就须要组件化而且订立规范，最好是以静态文档的形式写下来。
   这也为了减小代码过渡重复和稳定统一，同时，也能够把seo及服务端考虑进来

语言清单

当你问答了上述问题，那么是时候讨和你的团队讨论并选择一门语言了
由于，除了 疯狂js 的事情， 还有不少须要考虑的。

1. 你有一只写js的团队吗？
   能够考虑用ES6 ＋ babel ,它将让你的code 生活更加轻松
   
   
2. 你喜欢类型化语言吗？你的小弟们也喜欢咯？
   那就 来typescript
   
   
3. 你以为函数式编程OK吗？
   你能够小试一下ES6 和一些好比lo-dash 或者ramda。这些库都会有一些教程和书单 伴你前行
4. 你尝试过函数式JS并想玩点有意思的东西吗？
   那就试试ELM，的确很屌。。
   
   
5. 你更像是一个全栈猴？试试clojurescript.也很屌的!
6. 你是否爱上Scala了？那就scalaJs吧
   
   
7. 你知道或者喜欢Haskell？
   试试 purescript.你无法想象他有多酷 :)
8. 想更疯狂点吗？
   给你个清单 本身看吧

框架清单

1. 若是你须要的仅仅是为了基础工做服务的应用，没时间作太酷炫的东西
   那就试试 angular（看看这篇 快速上手.）
   
   
2. 若是大家偏重于原型驱动，而且也乐于维护一些将来出现的问题
   试试 angular. 准备迎接挑战.
   
   
3. 你是一名后端工程师，由于大家的前端狗辞职了，你须要本身构建一个前端项目。
   那仍是选择angular。同时也要开始找一个前端来帮你了。
   
   
4. 你不在意会缺失部分功能（由于你能够祢补），你就想开工快 构建快。
   那就来看看 ampersand/backbone + (挑选适合你的库)
   
   
5. 你的项目和大型app拥有相同的配置？
   那么添加 marionette/chaplin 到你的 backbone ， 或者能够考虑 ReactJs
   
   
6. 你有时间去作尝试，而且考虑长远性能？
   那试试mithril/knockout/aurelia + （适合你的库）
   
   
7. 你在普世和基础的函数式编程有很好的前端经验？
   那就玩 ReactJS + redux + ImmutableJS + ...
   
   
8. 你须要 更多的函数式编程技法 或者 交互性很强的app?
   增长 异步处理流 (bacon, rxJS）或者试试 Cycle.js （试验性的哦）
   敬告：让你们用用异步处理流是好事，请奔走相告。不要怀疑函数式编程的异步处理流。
9. 你想用强硬的规范和最佳的实践，你的app可能会变的很大，你扩展你的团队，你有时间投资到学习中?
   那你就投资给EmberJs吧，会是个好的投资
   
   
10. 你想要有一个像桌面程序同样的app
    你的App有表格 图标及其余一些数据分析功能，你想构建企业级应用?
    
    那就ExtJS
    
    
11. 你是为别人写东西的外包工做室？
    那你应该已经有一些本身的工具集了，那就follow ur heart吧
    
    
12. 你是一个自由职业者，为别人写东西？
    首先要适应他们的需求，你能够尝试vuejs ，走本身的路让别人痛苦去吧～
    注意：若是客户不给钱你就，你就一直让他们痛苦吧。
    
    

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

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

开始编码

1. 花点时间读读你选择的框架的文档
2. 向大牛请教，作一个良好的项目建立者
3. 装配全部的工具
4. 运用黑科技，我建议仍是工程师一点。。
5. 效益永远在第一位

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

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

蛋定～
你不想作决定，也以为emberjs 蛋疼，你以为你很勇敢 那就 来个串烧吧  ReactJs + Redux + ES6 + webpack + npm + jss + autoprefixer + eslint + Elemental UI + karma 并看看这篇文章。

别再bb 用就行了～～

看到不少人在说ReactJS ,为什么这么屌～

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

不少大牛在用它，你也应该玩玩，我发誓它很好玩的。。
若是它不是我说的这样 你能够回到这片文章下面对我破口大骂～

若是对前端感兴趣，看看这些在线书吧。

最后

16年的旧文了，在突飞猛进的前端世界里面，可能有些已通过时了，可是仍是会有不少帮助。

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