2018 年,零基础学习WEB前端开发应该关注哪些新技术?

随着近年来前端的一波又一波技术浪潮,前端早已经告别了切图的时代,迎来的是规模化,工程化的大路。但是在如此多变的技术浪潮下,我们如果想成为成熟的前端开发工程师,走上专业化的开发道路,我们都需要学会哪些技术呢?

首先我们来回顾一下 2017 年新的前端技术和新的方向。

微信小程序,在2017年可以说一出现就影响了市场。一年后,小程序却在不知不觉中变成了互联网的一种趋势,不仅重新定义着互联网,还在慢慢改变着我们的生活

小程序无需下载,上手即用的特点,成为互联网新的一种趋势,成为各大商家争相争夺的机遇。甚至有人说,得小程序者得天下。特别是今年微信推出小游戏,跳一跳游戏相信大家都有玩过,这是一个用H5编写的小游戏,一度刷爆朋友圈。这虽然对前端开发来说是一个简单的小游戏开发,却带来了惊人的效益。

所以,符合互联网潮流的小程序和H5小游戏会不会迎来它的春天,入行前端开发,面临前端开发的技术爆发,我们是否应该掌握小程序开发这个加分项呢?

在这里我还是要推荐下我自己建的web前端开发学习裙:659加上四七九再加上860,裙里都是学web前端开发的,如果你正在学习前端 ,小编欢迎你加入,今天分享的这个案例已经上传到群文件,大家都是软件开发党,不定期分享干货(只有前端软件开发相关的),包括我自己整理的一份2018最新的前端进阶资料和高级开发教程,欢迎进阶中和进想深入前端的小伙伴。

说到学习前端必须掌握的,我们不得不提前端三驾马车 React,Angular 和 Vue。

2017年,React 继续在前端领域占据主导地位,备受期待的 React 16 也正式发布。

这种能减少代码重写易于重构的框架还是很受开发者欢迎的。

但它是否能在 2018 年坐稳“王位”,还需不断完善整个框架的功能才是。

Angular 也不甘落后,在用户使用群体上,它排名第二。并且也在2017年发布了两个大版本,Angular 4 优化了视图引擎、减少代码体积;

Angular 5 中包含了像是编译器的改进,能更快的构建/重建。

基本上说Angular这个框架是比较完整的,但是对于复杂的界面开发就不是那么友好了。

所以他的地位一直在遭受挑战,而框架中的黑马 Vue 杀出重围,大有替代Angular的趋势。

你会选择vue还是ng

2017年,Vue 依然越来越受欢迎,该框架提供基于组件的架构。

它已经被许多大型公司采用,在 Stack Overflow 上的关注度居高不下。

所以会是Vue的2018年吗?

不过大家不要去猜测2018年学习哪个框架会更好,先打好学习框架的前端基础才是重点,学好了基础,框架学习才能得心应手。

然后就是现在很火的一个混合式APP开发,在去年有一个热词PWA,PWA(Progressive Web App)是 Google 于 2016 年提出的概念,2017 年已被迅速采用。可显著提高加载速度、可离线工作、可被添加至主屏、全屏执行、推送通知消息等等。国内有不少公司实践了PWA,例如饿了么、阿里等。PWA就是用混合式APP开发的理念来实现的,混合式APP,其实内容本质上还是网站内容,只是可以显示在APP上,在缓存、通知、后台功能等方面表现更好。可以理解为打包成APP的网站,2018年将会有更多的网站向混合式APP转型。

前端开发混合式APP优势在于,开发门槛低,开发效率高,可以同时面向两个平台,快速完成开发。目前前端开发混合式APP有很多框架和平台开发,其中,React Native是比较不错的开发框架。对于我们前端开发上手APP非常有好处。

说到那么多的新技术方向,很多小白可能会说,我现在零基础学习,是不是要直接学这些东西呀,现在前端开发的内容那么多,我应该怎么学呀?表示很迷茫。

其实前端技术更新是挺快的,但是技术不管怎么更新,怎么发展,都离不开基础的知识,把基础的内容学好,面向多终端开发,响应式开发掌握好,基础打牢了,在高深的内容都是可以迎刃而解的。

下面说一点零基础学习前端开发的一些建议,希望对正在学习前端开发的你有用:

怎么零基础学习web前端。

1.先说一下学习完web前端之后能干什么

学完web前端之后你可以开发网页,做h5动画,做手机端app,可以做自己的博客网站,可以做微信公众号开发,可以开发小程序,可以结合nwjs做电脑客户端软件:比如微信的pc版,钉钉的pc版 都是web前端来做的

2.怎么开始学习

两条路:自学或者找培训班,找培训班的话,我推荐达内和传智播客,在国内讲师质量都比较高。这块我们一点就过,我主要讲下怎么去自学。

对于自学最直接的方式就是看视频学习,可以是在线视频,比如 慕课网,麦子学院,极客学院,北风网都有从入门到精通的前端课程,这些视频都差不多,随便选一套就行,任何入门课程都一样,不用纠结于选哪一个。

视频找好了之后,如果你不想中途放弃,或者,浪费太多时间又没效果的话。就找找一个引路人,引路人当然是能力越强越好,找引路人的目的在于为你制定学习计划,把控学习质量,及时纠正错误的学习方向,教你正确的学习方式。给你做心理辅导。为你及时打气持续性补充你的信心。

我之前接触和辅导过很多自学的学生,有成功的也有放弃的,放弃的那些同学基本都是输在错误的学习思路和心理迷茫期。听他们抱怨说:没有人去指导他们,每天学完就学完了,第二天接着学,但是东西太乱都串不起来,也都不知道是干嘛用的,尤其是js部分,这种问题完全可以把一个人摧毁!所以 我一直对我的学生强调:有问题一定要去问,去解决,千万不要不懂装懂,弄明白了再往下走,人的心理是很脆弱的,一旦倒了可能就再也站不起来了。敬告各位新入行的同学,除非你之前有过编程经验,不然就找个引路人指导你。

3.列一个学习大纲

01.环境搭建

前端环境很好搭建,一个开发工具即可,webstorm,hbuilder,vscode,sublime。初学者建议sublime 也不要装插件,没有语法提示,可以打基础

02.html基础

带你去认识html,让你学习去运行html,等浏览器上面打开你的页面的时候,你会有很强的成就感,然后开始学习html的基础标签

03.css基础

html是勾勒,css是染色,基础的css学完你会有种想写页面的冲动,这时候你不用抑制住那种感觉,直接按照自己所想开写,这是你的第一个项目

04,js基础

js是页面的逻辑,作为一个web前端工程师,js是很核心的部分,也是很难的部分。js的学习之后放长一些,尤其是前一周,要让自己去熟悉那种语法环境,培养自己的开发思路,而且有一点就是学完一个星期的知识之后,及时和你的指引人沟通,看卡自己的理解是否有误,还有就是学习思路是否有问题,他会给你指出那些东西需要多学习,哪些不常用,还有就是给你点一下你学的这些在项目中会是怎么去应用,理论联系实际是最好的学习方式。

05.纯ja操作dom和jquery

这阶段要知道怎么去用js来更改页面的元素,怎么去写dom事件,经过一番联系后,再引入jquery,不要本末倒置,有个同学学完jquery之后说发誓以后再不用原生js操作dom!然后被我狠狠骂了一顿

06,开始你的ui框架之旅

这个阶段我推荐从bootstrap开始,这个框架很经典,响应式的珊格系统被后来框架一直沿用,在我线下教学的那几年,我都会带着学生一起看bootstrap的源码,让他们学会这种设计思想,因为之后对他们太有用了,当时他们很痛苦,现在他们说起来觉得很受益,如果可以,你也要去看看源码,先学会去定制bootstrap,公司注重二次开发,定制 bootstrap正好可以练手。

07.开始深入css3

基础学完css3要提上日程,这时你会看到不一样的世界

08.深入js

这阶段你就要去解读原型链,原型替换,this指向,es6,es7的新语法,

09.学一套主流mv*框架

vue,react,angular2选一种,

我建议从vue开始,react的jsx语法不适合你入门去学习,angular2的typescript语法糖难度也比较高,vue学起来平滑些,结合vue,学一下vue-router,vuex,element ui,axios,webpack。做个项目玩一下这个全家桶

10.升级后台语言nodejs

这个不作要求,你在学vue的时候其实已经在用nodejs了,你用的npm就是nodejs的一部分,这个阶段说的是nodejs编程,比较难理解,毕竟是写服务器的东西,不过前面基础打牢固,让别人一点拨就能上手,技术不难,难在思路转换。

3.总结做项目

两个项目,

一个是侧重于css特效方面的,要求就是非常酷,帅到没朋友

第二个项目侧重逻辑处理,用来升华你的逻辑能力

这两个项目可以从网上搜几个网站来模仿,之前我的学生有做过:苹果官网,魅族官网,花瓣网,网易云音乐,在行等很多网站,做的也很不错。

4.面试技巧培养阶段

这个阶段要培养下公司项目的具体流程以及面试技巧的培养,面试回答思路,如果有同学想多了解这方面,我很乐意给大家讲解,更多编程方面的分享请关注薇信工宗号:程序员大牛!

猜你喜欢

转载自blog.csdn.net/qq_41852103/article/details/81749526