怎样选择前端框架

怎样选择前端框架

怎样选择适合本身的前端框架，并在高产但参差不齐的前端社区中保持理性

翻译自：http://fse.guru/

介绍

Hello，开发朋友们！

下面你将看到一些比较主观的工具和框架。

但不要惧怕！

你能够选择任何你所熟悉的，或者忽略他们直接用你本身喜欢的就行了。

本文但愿帮助你了解前端社区中海量的工具。

固然，这些只是一些可选的列表，当你须要作出选择的时候帮助你抉择。

我本身使用它吗？

是的，当我须要开始项目的时候，我用它来做为提醒。

同时，每当有人问“我该使用什么框架呢？”的时候，我就会把这篇文章给他看。

由于，正如你明白的，事情没有绝对的对与错，可是有一些优质的框架可以帮助作出咱们更好的选择。

另外，我也会不时的更新本文，由于有时候当我学习更多后也会改变当初的想法。

我应该怎样开始?

若是你的项目不是很小，你应该须要下面几件事：

1. 项目模块化 我我的比较喜欢 Component-based architecture，由于他适用于 various-frameworks

   同时，考虑一些其余的例子，好比 BOT 、 Elm Architecture 或者 re-frame 或者 CycleJS

2. 模块加载器(RequireJS，Browserify, Webpack, ComponentJS, SystemJS)

   这些东西可以帮助咱们保持Javascript(或者components)彼此独立和可维护。

3. 包管理器(npm, jspm, bower)

   我我的一直比较喜欢 npm ，彷佛他是javascript和nodejs真正的标准。另外我会考虑bower来作补足，由于他是一个很好的下载静态资源的工具，但它在管理组件和依赖又不如npm强大。

4. 自动部署/编译/构建流水线(grunt/gulp/brunch/broccoli)

   由于，若是一直作重复的事情的话生命是很短暂的。

5. CSS预处理(jss/stylus/sass/css-modules)和 postprocessors(css0, autoprefixer, postcss)

   这些工具使css更美好，去除了一些浏览器兼容的问题。是的，我是从2015知道这些的，可是不论如何，它在过去确实是痛点。

6. 构建框架(Bootstrap, Zurb Foundation, Elemental UI, Material Lite)

   这些框架让不少web开发者合做，它们会帮助你处理基本的布局和样式。

   尽管，你能够考虑构建你本身的解决方案，若是你感受构建很厉害或者但愿成为前端专家，或者你须要为你的公司构建基本的视觉元素。

   若是是这样的话，建议你尽快使用方法论(BEM, OOCSS)，它们能够帮助你节约时间。

   我我的比较喜欢 BEM 命名方式和基本工做流，你可以从 styleguide for Brainly.com找到一些能够帮助你的灵感。

   若是你不构建基本的组成，建议看一看 HTML5 Boilerplate

7. 测试工具(jasmine, karma, mocha, tape, itern)

   任何人都须要测试，没有例外的。

8. 代码质量监控工具(eslint, husky, editorconfig)

9. 能够获取帮助的社区(chats, IRC, meetups, twitter)

好了，下一步呢？

在选择你的工具前有一些值得思考的问题须要解决。

准备好了吗？

1. 我须要和其余人合做吗？他们是谁？他们想要什么？

   这个问题会帮助你选择语言和工做流，这对你和你的伙伴都有帮助。

2. 我最关注什么？质量，开发速度，仍是可维护性？

   这样你能够决定是否试验一些新工具，以及是否能承担失败的风险。

3. 是否须要开放给第三方？

   面向的团队不一样可能会限制咱们语言的选择。

4. 我是否在处理核心的项目

   若是你处理核心项目，请最好选择高稳定性的语言和框架，这更安全，让你睡得更好。

5. 是一个可交互的app仍是基本的文档页面。

   结果极可能是你仅仅须要基本的HTML ＋CSS ＋ tools，或者静态网站生成器或者CMS。

6. 这是一个单一的项目仍是其余项目的相关项目？

   即便你有一系列项目，你也应该用一些组件和样式引导，这些有不错的文档。

直接减小代码重用，保持一致性。

另外，考虑SEO，和服务端渲染。

语言列表

当你回答完上面这些问题后，就能够和你的队友聊聊，而后选择一个语言了。

由于这里有不少的东西，而不是糟糕的Javascript，你能够选择

1. 是否有js开发团队

   考虑ES6(babel兼容)

   这会让你的生活简单一些。

2. 你是否偏心typed语言？开发typed是否能够？

   考虑 typescript

3. 函数式编程是否接受？

   你能够从简单ES6库开始，好比 lo-dash 或者 ramda。

   这里有一些教程和书来帮助你开始美好的旅行。

4. 你是否尝试过函数式编程，想要更好的东西？

   试试 elm ，很酷的！

5. 你是否可以全栈？

   试试 clojurescript，很酷很酷的

6. 你喜欢沙拉吗？

   试试scalaJS

7. 你知道Haskell吗?

   试试 purescript，真的很酷

8. 想要更多疯狂的？

   这里有一个能够编译成javascript的语言列表，选一个而后享受吧。

框架列表

1. 你仅仅须要基本的可运行的app？

   没有时间作更复杂的工做？

   试试 angular. start looking for help imediately

2. 你是否常常须要快速的原型开发？

   是否能在将来修复一些问题？

   试试 angular. 一些问题

3. 你是尝试前端开发的后端？

   试试 angular. 寻找一些前端开发者

4. 你是否须要很快的进行开发和构建，可是同时会丢失一些特色？

   试试 ampersand/backbone

5. 一样的技术选型，怎样从中型到大型？

   把 marionette/chaplin添加到你的backbone里面去，另外能够考虑 Reackjs

6. 你是否有一些时间来实验，同时获得很大的性能提高？

   试试mithril/knockout/aurelia+

7. 你是否有不错的前端实验精神，对函数式编程熟悉？

   试试 ReactJS＋Redux＋ImmutableJS+

8. 更多函数式编程技巧？或者偏好交互性强的应用？

   使用 reactive streams(bacon, rxJS) 或者试试 Cycle.js(实验性)

   注意1: add streams any会是很好的选择，能够推荐别人使用。

   注意2: 请不要拒绝使用 FRP的reactive streams

9. 你想要使用严格的验证和通用处理方式？

   你的应用会愈来愈大？

   你计划扩充你的团队？

   你有时间学习新东西？

   建议花时间学习 EmberJS，他将会是很好的投资!

10. 你是否须要“类桌面应用”？

    你的应用有表格，图例，或者其余分析功能？你在构建企业应用？

    试试 ExtJS

11. 大家是一个为其余开发者提供服务的工做室？

    你最好有一个不错的工具集，另外，同事之间最好有一些公共用例。

12. 你是一个为他人提供工具的自由开发者？

    适应他们的选择。

    尝试angular，这将不会形成多大麻烦，让其余人获得他们想要的。

    注意：若是别人付费，请不要改变客户的需求

13. 你正在构建一个有吸引力的产品，它将会不少人使用？

    有了明确的需求后咱们就从上面的列表中选择一个合适的框架。

14. 关于开发什么样的应用你有明确的需求（好比10屏的移动应用)

    花两周时间来试验特定的需求（ionic, famous, Sencha Touch)

怎样开始编码？

1. 花一些时间阅读你所选择框架或者工具的文档。
2. 在社区里面询问一些经验开发者怎样算是优秀项目的开端。
3. 准备全部的工具。
4. 极客精神。可是我建议更加工程化一点。
5. ...
6. 成功。

不知道怎么用我介绍的一些不常见框架？

看看 TodoMVC Examples，找到你选择的框架。

可是记住，这些项目只是示例，大多数状况下他们不适合大中型项目。

我不想作决定，告诉我怎么办？

好，好，冷静下来。

若是你不想作决定，你能够选择 EmberJS。或者你胆大，能够尝试 ReactJS + Redux + ES6 + webpack + npm + jss + autoprefixer + eslint + Elemental UI + karma，读这篇文章。

我看到了不少关于ReactJS的讨论，为何？

这是web开发的将来。

这里有一片很好的文章，来解释这个现象。

同时，不少优秀的开发者在使用它，你能够找出一些好的项目，这必定很棒，我保证！

若是不是，你能够任什么时候候回到这篇文章，在评论里面留下你的话。

若是你对怎样成为一名前端开发师感兴趣，能够看看这里

原创文章，欢迎转载。转载请注明：转载自Fs21 ' s Home，谢谢！
原文连接地址：怎样选择前端框架