怎样选择前端框架

wufan0 2019-06-20

怎样选择前端框架

怎样选择适合自己的前端框架,并在高产但良莠不齐的前端社区中保持理性

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

介绍

Hello,开发朋友们!

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

但不要害怕!

你可以选择任何你所熟悉的,或者忽略他们直接用你自己喜欢的就好了。

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

当然,这些只是一些可选的列表,当你需要做出选择的时候帮助你抉择。

我自己使用它吗?

是的,当我需要开始项目的时候,我用它来作为提醒。

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

因为,正如你明白的,事情没有绝对的对与错,但是有一些优质的框架能够帮助做出我们更好的选择。

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

我应该怎样开始?

如果你的项目不是很小,你应该需要下面几件事:

  1. 项目模块化 我个人比较喜欢 Component-based architecture,因为他适用于 various-frameworks

    同时,考虑一些其他的例子,比如 [BOT](http://www.chris-granger.com/2013/01/24/the-ide-as-data/) 、 [Elm Architecture](https://github.com/evancz/elm-architecture-tutorial/) 或者 [re-frame](https://github.com/Day8/re-frame) 或者 [CycleJS](http://cycle.js.org/)
  2. 模块加载器(RequireJSBrowserify, 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知道这些的,但是不论如何,它在过去[确实是痛点](http://caniuse.com/#search=svg)。
  6. 构建框架(Bootstrap, Zurb Foundation, Elemental UI, Material Lite)

    这些框架让很多web开发者合作,它们会帮助你处理基本的布局和样式。
    
    尽管,你可以考虑构建你自己的[解决方案](http://styleguides.io/),如果你感觉构建很厉害或者希望成为前端专家,或者你需要为你的公司构建基本的[视觉元素](https://uxmag.com/articles/anchoring-your-design-language-in-a-live-style-guide)。
    
    如果是这样的话,建议你尽快使用方法论([BEM](https://en.bem.info/), [OOCSS](http://oocss.org/)),它们可以帮助你节约时间。
    
    我个人比较喜欢 BEM 命名方式和基本工作流,你能够从 [styleguide for Brainly.com](https://github.com/brainly/style-guide#methodology)找到一些可以帮助你的灵感。
    
    如果你不构建基本的组成,建议看一看 [HTML5 Boilerplate](https://html5boilerplate.com/)
  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](https://gist.github.com/getify/7ae82fdc2e86bf66bcba#file-gistfile1-md)([babel](https://babeljs.io/)兼容)
    
    这会让你的生活简单一些。
  2. 你是否偏爱typed语言?开发typed是否可以?

    考虑 [typescript](http://www.typescriptlang.org/)
  3. 函数式编程是否接受?

    你可以从简单ES6库开始,比如 [lo-dash](https://lodash.com/) 或者 [ramda](http://ramdajs.com/docs/)。
    
    这里有一些[教程](http://reactivex.io/learnrx/)和[书](https://leanpub.com/javascript-allonge)来[帮助你](https://github.com/MostlyAdequate/mostly-adequate-guide)开始美好的旅行。
  4. 你是否尝试过函数式编程,想要更好的东西?

    试试 [elm](http://elm-lang.org/) ,很酷的!
  5. 你是否能够全栈?

    试试 [clojurescript](https://github.com/clojure/clojurescript),很酷很酷的
  6. 你喜欢沙拉吗?

    试试[scalaJS](http://www.scala-js.org/)
  7. 你知道Haskell吗?

    试试 [purescript](http://www.purescript.org/),真的很酷
  8. 想要更多疯狂的?

    这里有一个可以编译成javascript的语言列表,选一个然后享受吧。

框架列表

  1. 你仅仅需要基本的可运行的app?

    没有时间做更复杂的工作?
    
    试试 [angular](https://angularjs.org/). [start looking for help imediately](http://www.fse.guru/2-years-with-angular)
  2. 你是否经常需要快速的原型开发?

    是否能在未来修复一些问题?
     
     试试 [angular](https://angularjs.org/). 一些[问题](http://www.fse.guru/2-years-with-angular)
  3. 你是尝试前端开发的后端?

    试试 [angular](https://angularjs.org/). 寻找一些[前端开发者](http://www.fse.guru/2-years-with-angular)
  4. 你是否需要很快的进行开发和构建,但是同时会丢失一些特点?

    试试  [ampersand](http://ampersandjs.com/)/[backbone](http://backbonejs.org/+)
  5. 同样的技术选型,怎样从中型到大型?

    把 [marionette](http://marionettejs.com/)/[chaplin](http://chaplinjs.org/)添加到你的backbone里面去,另外可以考虑 [Reackjs](https://facebook.github.io/react/)
  6. 你是否有一些时间来实验,同时得到很大的性能提升?

    试试[mithril](http://mithril.js.org/)/[knockout](http://knockoutjs.com/)/[aurelia](http://aurelia.io/)+
  7. 你是否有不错的前端实验精神,对函数式编程熟悉?

    试试 [ReactJS](https://facebook.github.io/react/)+[Redux](https://github.com/rackt/redux)+[ImmutableJS](https://facebook.github.io/immutable-js/)+
  8. 更多函数式编程技巧?或者偏好交互性强的应用?

    使用 reactive streams([bacon](https://baconjs.github.io/), [rxJS](http://reactivex.io/)) 或者试试 [Cycle.js](http://cycle.js.org/)(实验性) 
    
    注意1:  [add streams](http://www.felienne.com/archives/3724) any会是很好的选择,可以推荐别人使用。
    
    注意2: 请不要[拒绝使用 FRP的reactive streams ](https://youtu.be/Agu6jipKfYw?list=PLZlJZzHmx31XvgT96DfbXQ4IMb1ryztbp)
  9. 你想要使用严格的验证和通用处理方式?

    你的应用会越来越大?
    
    你计划扩充你的团队?
    
    你有时间学习新东西?
    
    建议花时间学习 [EmberJS](http://emberjs.com/),他将会是很好的投资!

10. 你是否需要“类桌面应用”?

你的应用有表格,图例,或者其他分析功能?你在构建企业应用?
 
 试试 [ExtJS](http://emberjs.com/)

11. 你们是一个为其他开发者提供服务的工作室?

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

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

适应他们的选择。

 尝试angular,这将不会造成多大麻烦,让其他人得到他们想要的。
 
 注意:如果别人付费,请不要改变客户的需求

13. 你正在构建一个有吸引力的产品,它将会很多人使用?

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

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

花两周时间来试验特定的需求([ionic](http://ionicframework.com/), [famous](http://famous.org/), [Sencha Touch](https://www.sencha.com/products/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,谢谢!
原文链接地址:怎样选择前端框架

相关推荐