面对众多的前端框架,我们该如何学习?

记得就在刚接触 AngularJS 的时候,那时市场上正值 React、Vue、AngularJS 三足鼎立,大量的前端新人可能都会有这样的困惑:这三个框架到底该学哪个好呢?我自己当时也是非常的迷惑,找不到一个合适的答案。

作为一个 React、Vue、AngularJS 都写过的人,现在这个已经不再是问题了。先说结论:

公司用哪个框架就先学框架;其次自己喜欢哪个框架就学哪个框架

我的经历是因公司业务而以 AngularJS 起步,再因个人兴趣学习 Vue,最后再因为新公司以 React 技术栈为主,从而拥抱 React。

知识和学习能力是可以迁移的,掌握了 Vue 技术栈,再去学习 React,其迁移成本非常的小,你所需要做的是看文档,比较二者的异同,然后就可以直接上手了,反之也成立。因为 Vue 和 React 的相似度确实蛮高的。

如果你想学习前端可以来这个群,首先是二九一,中间是八五一,最后是一八九,里面可以学习和交流,也有资料可以下载。

经过了这三个框架的学习,发现学习可以总结成3个步骤:

  • 第一步:基础学习。撸一遍官方的文档及教程(如果有的话),这时候不推荐其他二手教程,因为以正确的姿势学会走路才能让你后面跑得更快。别在一开始的时候学错了姿势;
  • 第二步:项目驱动学习。要想快速熟练掌握一门框架,少不了大量的写代码。通过项目的方式来写编写大量的代码,可以帮助你快速掌握该框架的用法及踩坑,快速积累经验;
  • 第三步:求知驱动学习。在求知驱动学习过程中,遇到任何产生困惑或者感兴趣的点,都要去深入学习。这样的学习过程虽然比较慢,但是足够的系统,持续学习下去,能让我们对于这个领域保持足够的专业。

第一步:基础学习

基础的重要性已经无需强调了。打好基础才能走得更远。所以在一开始的时候,尽量选择官方文档及教程。优先选择英文原版,如果阅读有困难,退而求其次,选择中文翻译版。撸一遍文档能帮你快速建立对于框架的认识。

第二步:项目驱动学习

技术学习中最推崇的可能就是Learning by doing,做中学。光看文档的学习是不完整的。真正快速有效的学习是通过项目驱动学习。因为通过项目,你能将你学到的知识用于解决实际的问题。在解决问题的过程中,又发现了知识的不足,再反过去查阅文档,学习。一方面,因为正反馈非常及时,会让自己更有成就感;另一方面,也能快速得吸取知识。

这种方式吸取新知识的效率非常高,能够对新技术进行快速的学习和应用。但是它的缺点便是:不够系统。因此你还需要求知驱动。

第三步:求知驱动学习

在项目驱动学习中,讲究的是效率。但是对于整个框架,你掌握得并不全面、系统。这三个步骤的关系就好比建造一座大厦的过程,先是打地基(基础学习,撸文档),再是搭建建筑的水泥主体框架(项目驱动学习,帮助建立对于框架的整体架构),最后才是上砖,装修(兴趣驱动学习,深入学习,不断补全之前遗漏的知识,完善整体架构)。求知驱动的意义在于通过对于该框架的深入研究,不断完善你的系统知识,最终建立一个完整的系统。所以在项目驱动学习过程之后,你应该花更多的精力这一阶段。通过深入学习来不断构建你的对于这个框架的系统体系。

这三个过程并不是独立隔断的,而是一个不断循环、交替的过程。只有通过这样的交替、循环,才能构建最终的知识体系。

但是很多人会只停留在第二步项目驱动学习就止步不前了。一旦觉得自己能hold住项目开发后,就不再去深入学习了。不会再花时间去补上之前的不足,不再花时间去了解框架或者语言背后的优秀思想及实现。缺少求知驱动学习这一阶段,虽然并不妨碍你成为一个合格、高效的开发者,但是绝对无法让你成为一个优秀的开发者。

一个优秀的开发者或者说学习者,一定是保持着好奇心和钻研的动力。

时间: 2024-11-05 14:46:04

面对众多的前端框架,我们该如何学习?的相关文章

如何用 Sketch 打造「前端框架」

本文讲的是如何用 Sketch 打造「前端框架」, 前端框架 需要考虑的事项: 当我们与一大群设计师同时推进同一个项目的时候,要做到协调一致非常困难.而在面对有审美要求.对指定行为和互动有明确要求的系统性项目时尤为如此. 我们可用于建立界面的标准化的手段之一就是定义一份风格指南(纯视觉角度),这样可以帮助整个设计团队避免在未来可能出现的改动带来的不必要的工作时间,提高工作效率.让我们可以把精力更好的集中在组件的行为和应用中的交互上. 一份优秀的风格指南需要被团队全员采用,比如开发者.产品负责人.

2014年5个最流行前端框架对比

2014年5个最流行前端框架对比 当今时代众多CSS的前端框架纷涌而至,但真正的优秀的却屈指可数. 在这篇文章中我们将对我认为最好的五个框架进行比较,每个框架都有自己优缺点和特定的应用领域,这允许你根据特定项目的需求选择合适的框架.比如, 如果你的项目比较简单,你就不需要复杂的框架,此外,许多选项是模块化的,这允许你仅使用你需要的组件,或者混合使用不同框架的组件. 我们要讨论的框架都是基于其在github上的人气展示的,首先说最流行的,当然是:Bootstrap. (注意:下面的一些信息在未来的

最流行前端框架对比 Bootstrap/Foundation by ZURB/Semantic UI/Pure by Yahoo!/UIkit by YOOtheme

当今时代众多CSS的前端框架纷涌而至,但真正的优秀的却屈指可数. 在这篇文章中我们将对我认为最好的五个框架进行比较,每个框架都有自己优缺点和特定的应用领域,这允许你根据特定项目的需求选择合适的框架.比如, 如果你的项目比较简单,你就不需要复杂的框架,此外,许多选项是模块化的,这允许你仅使用你需要的组件,或者混合使用不同框架的组件. 我们要讨论的框架都是基于其在github上的人气展示的,首先说最流行的,当然是:Bootstrap. (注意:下面的一些信息在未来的几周和几月后就过时了,如:GitH

如何选择前端框架:ANGULAR VS EMBER VS REACT

最近一段时间是令前端工程师们非常兴奋的时期,因为三大Web框架陆续发布新版本,让我们见识到了更强大的Web框架.Ember2.0在2个月之前已经发布,从1.0升级到2.0非常简单.几周之前React发布了0.14版本.还有很多流行的前端框架,像Backbone .Knockout及Aurelia.如果你想开发一个Web app,建议采用Angular,Ember或React三种框架中的一个.这三个框架可以说是安全级别最高,技术非常成熟的框架,而且有很多技术社区支持.所以你又开始纠结了,开发Web

HTML 5 前端框架jQuery Mobile使用教程

1. 简介 jQuery Mobile是由(MT)Media Temple联合多家移动设备厂商以及软件企业共同发起的针对触屏智能手 机与平板电脑的Web应用的前端开发框架. jQuery Mobile构建于大名鼎鼎的jQuery 以及 jQuery UI类库之上,为前 端开发人员提供了一个兼容所有主流移动设备平台的统一UI接口系统.拥有出色的弹性,轻量化以及渐进增强特性与可访问 性. jQuery Mobile框架遵循"write less, do more"思想来设计,通过该框架,用

HTML 5前端框架Bootstrap使用教程

1. 简介 Bootstrap是Twitter推出的一个开源的前端框架. Bootstrap由Twitter的设计师Mark Otto和Jacob Thornton合作开发,由动态语言Less写成.它是一套"易用.优雅.灵活.可扩展"的前端工具集,提供了优雅的HTML/CSS 规范. Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括MSNBC(微软全国广播公司)的 Breaking News都使用了该项目. Bootstrap兼容于所有主流浏览器,包括各种

细数2014年5个最流行的前端框架

  现如今快要被各种各样的 CSS 前端框架给淹没了,真做的不错的其实也就那么几个.本文将对比五个我认为是现在最好的框架.这些框架每一个都有自己的优缺点和适用的应用类型, 你需要根据自己的需要来选择不同的框架. 例如,如果你的项目简单,就不需要使用一个复杂的框架.又或者,很多框架都是模块化的,你可以只是用你需要的模块,或者把不同框架的模块混到一起使用. 我将要介绍的这些框架的顺序与它们在 GitHub 的流行程度有关.自然,就是从最流行的 Bootstrap 说起. 提示:在接下的几周或者几个月

对Web开发中前端框架与前端类库的一些思考

  这篇文章主要介绍了对Web开发中前端框架与前端类库的一些思考,本文讲解了前端框架的理解误区.前端框架与前端类库的区别.前端MVC框架思想等内容,需要的朋友可以参考下 说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此毫无意义,框架也是一样.在技术选型和架构设计当中,脱离网站业务发展的实际,一味的追求时髦新技术,可能会适得其反,将网站发展引入崎岖小道.就好像一个日均pv只有

比BOOTSTRAP还更强大的前端框架TOOLKIT

  目前比较流行的前端框架有Bootstrap.Foundation,这两都有着常用的网页设计组件,并且兼容移动设备,深受大众喜爱,但如果你认为这两个框架的组件依然不够用的话,可尝试今天分享的Toolkit,它内置的UI组件更多.更强大,而且实用流行. Tookit框架特点是使用扁平化设计,并带有很多新鲜的UI组件,配合CSS3动画,使很多组件交互效果变得很漂亮,功能实用强大. 下面来看看一些截图介绍: Tookit 高亮文本提示 Tooltips 提示信息组件(图:左下角) 有动画效果,英文称