我是这样学习前端的

简介:

前沿 
算算时间今年(2016年)是进入前端开发这个领域第五个年头,自从上次总结完《我的编程之路》后,还想从更细节的方向上写一写自己是如何学习前端开发,并且还能够保持进步和对技术的敏感。

对于现在进入这个领域的朋友们来说,很多东西其实你都可以选择放弃了,因为你的起点比之以前要提高了不少,但相对来说知识点又多了很多。PS:至少你不用去兼容IE6了。 
来看一看JavaScript的趋势图: 
JavaScript 2016年5月 TOP 10


JavaScript 趋势图


Github 2008-2015统计


最流行的编程语言JavaScript能做什么? 
虽然前端领域属于一个比较新的领域,但是至少它也发展了有很多年了。回顾从前,Web前端开发最基础核心的三剑客:HTMLCSSJavaScript,可能还需要包括Flash系列,而现在除了Flash(如果你不是直播视频领域的话),基本上还扩充了HTML5CSS3ES2015,以及各种框架(backbone,react,angular等)。 
角色的定义 
前端开发也应该是软件开发工程,所以优秀的软件开发工程需要具备的知识,你也应该需要具备。 
良好的数学逻辑 
良好的数据结构与算法 
操作系统 
编译原理 
计算机系统体系

当你具备良好的基础知识时,对于编程二字才可能理解的更透彻。后续你才能进一步的去学习软件设计模式,标准,这些哲学范畴的思想,就好比你认识了汉字,才能阅读完一篇文章。 
当然如果你在学校学习的非常好,下列的学习资源推荐就当是复习吧。 
学习资源推荐 
数学逻辑(web前端学习交流群:291851189 禁止闲聊,非喜勿进!) 
操作系统,我建议你阅读 《操作系统精髓与设计原理》 即可,如果理解起来费劲你可以继续去公开课 或者 iTunes U上搜索视频资源。PS:放心吧,肯定有。 
编译原理,推荐在 iTunes U 搜索 冯博琴老师 的教学视频。 
计算机系统体系有非常多的知识点,你可以继续搜索教学视频来观看。

无论何时你都不能丢掉 HTMLCSS,这个问题在我的身上也出现过,过去很长的时间内我基本不怎么会 CSS,这也意味着当我需要去绘制UI时往往效率不高。

无经验的同学 我推荐你先使用 freeCodeCamp来学习基础的语法,配合 JS bin来练习。 
有其他语言开发经验的同学 我推荐你直接学习一门框架,比如React或者Vue,先做一个小项目,比如React官方提供的To do应用,在这个过程中,你也基本熟悉了JS的语法,使用方式等。你可能还需要 Devdocs 来查看Api,这一点非常重要。 
当你渡过了入门阶段之后,如何提升可能会是你目前迫在眉睫的需求。回到Web领域,我们来看它的本质。本质是你所有的工作都在围绕着 请求 在处理逻辑。我认为提升的第一步是去研究 HTTP ,当你熟练掌握了 HTTP 以及它身后的 TCP之后,你才会真正理解Web开发的含义。(多线程处理,事件循环,缓存等等这些手段,不都是在如何处理请求么?)没事翻一翻《HTTP权威指南》还是有好处的。 
套用一句老话,如果你的基础不扎实,一切都是“浮云”。 
具备良好的视野 
良好的视野是你能看清楚趋势

如果你现在还准备去学习 Flash ,那我只能说你的视野都被狗吃了。至少你可以通过社区来了解 前端 的发展动态,去了解出现了哪些新的框架,更新了哪些新的Api或者属性。未来一段时间内,国内或者国际厂商会使用哪些技术等等。 
最次一些的,你还可以关注 Github 来了解项目的趋势。 
瞧瞧这些年里前端发展的变化: 
从框架层面开始:backbone -> angular -> react 
工具生态:grunt -> gulp -> webpack 
语言:JavaScript 1.3 -> ECMA 5 -> ECMA 2015,CSS2.1 -> CSS3.0,XHTML -> HTML4.0 -> HTML5.0 
Firefox OS (虽然它挂了) 
桌面应用:NW.js -> Electron 
出现了Node.js和Mongodb 
服务端框架:Express -> koa 
移动应用:PhoneGap -> Cordova | ionic -> React Native | weex 
语法检查:jslint -> eslint 
模块化:AMD | CMD -> Commonjs -> import export 
语法增强:CoffeeScript -> Dart -> TypeScript

… 旧技术虽然消亡了,但它们留下的思维启发永在。说不完的变化与发展,拥抱变化用心去体会吧。 
戒浮躁,定乾坤 
随着前端生态圈的繁荣出产了更多的框架和解决方案。

更久远之前我们是这样写前端的: 
使用jQuery来编写大量的业务逻辑和效果,圆角我需要四个图来拼接。 
2010-2016年的三个阶段: 
使用backbone的MVC组织源代码,大量的使用jQuery插件的形式来构建UI界面,那个年代仅用了Grunt 来处理一些合并,压缩的事情。 
构建工具换成了Gulp,对于业务进行了模块化分层(requirejs),研究angular.js来编写富应用程序。 
通过组件(react)来构建我们的Web页面,使用webpack来构建模块化和优化,平台向移动迁移,研究React Native这样的混合开发方式,并且使用上了ES6。

如果你想学习前端可以来这个群,首先是291,中间是851,最后是189,里面可以学习和交流,也有资料可以下载

生态圈的繁荣也容易让人产生选择困难症,东西越多越难选择,害怕今天刚学习了就被淘汰的心理。这个时候,我想最好的方式就是要戒浮躁,看着东西很多,其实选择一项,也足以。当你成为一个框架的大师时,你还害怕不能成为另一框架的大师吗?专业这个东西除了经验的积累和沉淀,最重要的本质是它们都是互相通顺的。 
目前,我选择了研究和使用react这样的生态做为自己的框架技术栈,从中学习也应用在公司的产品中,随着深挖它的源码,反而发现自己对于技术的理解又有了一次提升。 
做事更要学会思考 
对于刚刚参加工作的同学来说,思考比做事更重要。如果你为了业务而业务,不停的去堆积,只能说过些年你还是如此。去好好的想一想,编程到底是在做什么? 
提出问题自问 
怎么才能写好代码,有时候洁癖或者说强迫症很可能会是你的原动力。 
是不是该主动的去重构代码 
我们需要对于业务代码进行一些分层吗? 
我写的代码有没有符合团队制定的编程风格 
我是不是该使用语言提供的Api,比如数组中的push,pop等。 
公司使用的框架,我理解了吗?

只有自己主动了,去思考了,才可能发现自己的很多问题,有时候自省也非常的重要。 
学习Node 
说真的Node.js在公司内部用于Web开发的场景并不是很多,仅仅是有一些尝试前后分离的项目,体验上来说依然不够友好。但是,这样的一个环境运行时,我认为是有必要学习的。更多的不谈,做为一个技术补充,它也是非常棒的。你可以先阅读 七天学会NodeJS 来入门,至少有一个普遍的了解。其次,建议你学习一个Web开发框架,比如 koa,然后,学习一下 Mongoose 来驱动数据。 
重要的是你应该一无既往的深入学习服务端的思想与知识。 
坚持写作 
坚持写作,是沉淀经验的最好机会

所谓的温故而知新,专业在向前发展,接收的大量信息,在人脑中是有局限性的。很多知识,只会存在于一个印象或者一个引子,而写作不仅仅是分享,也是在沉淀你自己的经验。(这一个部分就不浪费篇幅了,我相信做为一个技术专业者,你应该懂的。) 
而且写作还能让你和其他开发者针对一个问题展开讨论,何乐而不为呢? 
提高工作或者学习的效率 
提高工作或者学习效率应该是一件非常重要的事情,首先应该需要合理的制定任务与时间,我相信 trello应该会是一个非常好的工具,来制定Task。 
其次,你还应该纪录自己的编程时间,用来了解每天都在编写哪些代码。你可以使用WakaTime来分析你的编程。 
在学习过程中,你也可以使用jsbin来运行你的代码,观察结果。

相关文章
|
2月前
|
前端开发 JavaScript 开发者
从零开始学习前端开发
前端开发是目前互联网行业中最为热门的职业之一。本文将介绍从零开始学习前端开发所需的基础知识和技能,包括HTML、CSS、JavaScript等方面的内容,并提供了一些实践性的建议和学习资源,帮助初学者快速入门。
67 1
|
3月前
|
前端开发 JavaScript
从零开始学习前端开发
前端开发是当前最热门的技术之一。本文将从零开始,详细介绍前端开发的基础知识和实践技巧,为初学者提供全面的学习指南。
30 0
|
2月前
|
存储 开发框架 前端开发
从零开始学习前端开发
前端开发是现代互联网应用程序开发中不可或缺的一部分。本文将带您从零开始学习前端开发,包括HTML、CSS和JavaScript等核心技术,以及常见的开发框架和工具。
|
3月前
|
Web App开发 前端开发 JavaScript
从零开始学习前端开发
在当今数字化时代,前端开发人员的需求越来越高。本文将介绍从零开始学习前端开发所需学习的技能和工具,以及如何将这些知识应用到实际项目中。
|
13天前
|
前端开发 JavaScript Java
通过学习mayfly,我学会了前端如何优雅设计字典值
`shigen`是一位擅长多种编程语言的博主,他在探索[mayfly-go](https://juejin.cn/post/7319365035552309248)项目后,发现了对枚举值管理的优雅设计。他分享了如何将字典和枚举值结构化,使用Vue+typescript实现更易维护的代码。通过创建`TagType`和`EnumValue`类,以及提供静态方法,实现了模块化和简洁的字典处理。示例展示了如何在页面中高效引用和显示字典数据,提高了代码的可读性和可维护性。
16 3
通过学习mayfly,我学会了前端如何优雅设计字典值
|
2月前
|
存储 移动开发 前端开发
从零开始学习前端开发
前端开发是一项非常有前途的技能,在当今数字化时代中变得越来越重要。本文将介绍从零开始学习前端开发所需的基本知识,包括HTML、CSS和JavaScript的基础知识以及相关工具和框架。
|
2月前
|
前端开发 JavaScript 开发者
从零开始学习前端开发
前端开发是当前最热门的IT职业之一,随着互联网的飞速发展,对于具有良好前端知识的开发者需求不断增长。然而,对于初学者来说,学习前端开发需要掌握一系列的技术和工具,这可能会让他们感到非常困难和挫败。本文将从零开始,为初学者介绍前端开发的核心技术和实践经验。
|
2月前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
64 1
|
2月前
|
Web App开发 前端开发 开发工具
从零开始学习前端开发
前端开发是现代互联网时代必不可少的一项技能,通过本文,你将了解到前端开发的基础知识、常用工具和实践经验。
|
2月前
|
前端开发 JavaScript 开发者
从零开始学习前端开发
前端开发是近年来非常热门的技术领域,很多人都想要学习,但是不知道从何开始。本文将从零开始介绍前端开发的基础知识和学习路径,帮助初学者快速入门。