查看: 730|回复: 0

[原创] 2019web前端开发的发展趋势,需要掌握什么技术

[复制链接]
论坛徽章:
0
发表于 2019-1-17 15:07 | 显示全部楼层 |阅读模式
[color=rgba(0, 0, 0, 0.65)]前端是个最近几年火起来的工种,而且持续火热中,有个词叫水涨船高,来的人多了,竞争多了,标准也就提高了。现在对前端工程师的要求跟当年前已经不能同日而语了。
[color=rgba(0, 0, 0, 0.65)]大前端,包括 Android、iOS、web 前端、小程序开发等。
[color=rgba(0, 0, 0, 0.65)]当然了,所谓的趋势,不是一天两天就到来的,它是未来的一个技术方向,我们之所以关注趋势,是要关注变化,技术的发展与普及不是一日之功,一定是慢慢过渡的,但是你能够比其他人提前看到方向,真正的市场到来的时候,你就可以提前做好准备,提前发掘机会。
[color=rgba(0, 0, 0, 0.65)]

[color=rgba(0, 0, 0, 0.65)]自己是一个五年的前端工程师
这里推荐一下我的前端学习交流群:731771211,里面都是学习前端的从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴。不定时更新技术,与企业需求同步。好友都在里面交流,每天都会有大牛定时讲解前端技术!
[color=rgba(0, 0, 0, 0.65)]点击:加入
[color=rgba(0, 0, 0, 0.65)]首先,我们从基础来看,在对2019前端开发如何进阶,提升自己,再做更深一层讲解。
[color=rgba(0, 0, 0, 0.65)]1 基础技术
[color=rgba(0, 0, 0, 0.65)]前端的三大基础毫无疑问就是HTML、CSS和JS。我称之为前端的骨、肉和魂。
[color=rgba(0, 0, 0, 0.65)]先说“骨”——HTML。HTML,翻译过来就是超文本标记语言,而不是江湖上的HOW TO ML。方向不能搞错了,我们整的东西可是老少咸宜的。HTML学习最重要的标签的学习,div、h1-h6、p、ul-li、strong、图片、字体等,什么内容用什么框.
[color=rgba(0, 0, 0, 0.65)]再说“肉”——CSS。CSS定义了HTML标签的显示外观,气质。主要掌握浮动,宽高设置、显示属性等
[color=rgba(0, 0, 0, 0.65)]最后“魂”——Javascript。这是运行在浏览器上的脚本,但是现在javascript已经远远不是当年的那个js了,尤其Ecmascript6标准出来后,nodeJS 横空出世,JS暴露出一统天下的野心,JS让网页变得灵活,其实现的每一个明里暗里的交互,其实是为了触及您的灵魂,这也是其成为魂的原因。
[color=rgba(0, 0, 0, 0.65)]而现在,CSS3和HTML5的发展,又将web推向下一个时代,一个更为丰富多彩的时代。
[color=rgba(0, 0, 0, 0.65)]2 环境基础
[color=rgba(0, 0, 0, 0.65)]设备、浏览器以及工作原理
[color=rgba(0, 0, 0, 0.65)]必须指出的是,html CSS JS都是运行在浏览器的,是由浏览器负责编译和呈现的。所以必须了解浏览器的工作原理。但是浏览器千千万万,也不是每个都要去解剖,主要的有Chrome, Firefox, IE,Safari,Opera,国内的主浏浏览器基本是基于chrome内核开发,做了一些更为接地气的功能,了解下就可以了,主要有QQ浏览器,UC,百度浏览器,360浏览器,搜狗浏览器,猎豹浏览器等。
[color=rgba(0, 0, 0, 0.65)]3 计算机基础
[color=rgba(0, 0, 0, 0.65)]计算机网络,http协议。既然是web必不可少需要知道计算机网络的知识,这对于网页的加载和速度优化有很大的帮助,并且,我们做的不是静态的页面,而是动态的,所以必然涉及到与后台之间的数据的传输和存储,这个是要掌握的。
[color=rgba(0, 0, 0, 0.65)]必须懂:Ajax,必须会的工具:fiddler
[color=rgba(0, 0, 0, 0.65)]4 流行框架
[color=rgba(0, 0, 0, 0.65)]流行的前端UI框架:
[color=rgba(0, 0, 0, 0.65)]Bootstrap、jQuery UI、Amaze UI
[color=rgba(0, 0, 0, 0.65)]流行的前端框架:
[color=rgba(0, 0, 0, 0.65)]Node.Js
[color=rgba(0, 0, 0, 0.65)]jquery mobile
[color=rgba(0, 0, 0, 0.65)]angular.Js
[color=rgba(0, 0, 0, 0.65)]Vue.js
[color=rgba(0, 0, 0, 0.65)]React.js
[color=rgba(0, 0, 0, 0.65)]5 可视化组件
[color=rgba(0, 0, 0, 0.65)]Echarts
[color=rgba(0, 0, 0, 0.65)]tableau(收费)
[color=rgba(0, 0, 0, 0.65)]6 新应用
[color=rgba(0, 0, 0, 0.65)]针对移动化以及物联网方向发展
[color=rgba(0, 0, 0, 0.65)]7 锦上添花—
[color=rgba(0, 0, 0, 0.65)]UI、 UX 、交互设计、 SEO(包括SEM) 、产品,更主要一个同理心。好的设计和交互才能带来的好的体验,赢得用户。
[color=rgba(0, 0, 0, 0.65)]SEO则在推广层面,好的SEO让我们以最低的成本,借力搜索引擎,获得更加跟多的曝光机会,毕竟这是个酒香也怕巷子深的时代。
[color=rgba(0, 0, 0, 0.65)]最后是产品,站在产品角度,融合(前后端)技术和商业,让产品产生价值,实现价值。

[color=rgba(0, 0, 0, 0.65)]
image.png

[color=rgba(0, 0, 0, 0.65)]作为一个新兴的技术领域范围,大前端在不同的语义环境下,有着不同的解释和含义,我们以几个视角去对大前端并做逐一的分析。
[color=rgba(0, 0, 0, 0.65)]Node.js 与前后端分离
[color=rgba(0, 0, 0, 0.65)]在绝大多数的前端开发者口中,大前端有时与 Node.js 一起讲,有时与前后端分离一同讲,事实上,大前端概念也正是由广大前端开发者提出的。
[color=rgba(0, 0, 0, 0.65)]过去几年,前端技术经历了爆发式的发展,这种发展最重要的推动者之一就是 Node.js。Node.js 为前端建立了与系统之间沟通的桥梁,从此前端技术不仅能在服务端大放异彩,并且在本地的前端开发工具与工作流上大展身手,前端从此被解放,JavaScript 统治世界的论调一度甚嚣尘上。
[color=rgba(0, 0, 0, 0.65)]不过,当人们冷静之后,发现 Node.js 在服务端并没有太多的优势,再加上 Node.js 本身技术发展的一些波折,导致它在服务端的应用并不理想。但尽管如此,广大的前端开发者还是取得了一些阶段性胜利,其结果就是前后端分离。
[color=rgba(0, 0, 0, 0.65)]在传统 Web 开发时代,前端页面模板是由后端生成的,导致在页面需要频繁修改的时候,效率极低。前后端分离指的是后端只提供接口,前端对页面有完整控制,同时通过中间层将前后端隔开,在这里对数据进行抽取、聚合、分发等操作。这个中间层,通常也是由前端开发工程师负责。
[color=rgba(0, 0, 0, 0.65)]从这种意义上讲,大前端的原始定义可以称为前端技术的扩大化,包括 Node.js,同时对 Web 页面有更强的控制权,开发也将承载更多功能的页面。
[color=rgba(0, 0, 0, 0.65)]

[color=rgba(0, 0, 0, 0.65)]此处划重点:基于 Node.js 的前后段分离是大前端的重要技术。
[color=rgba(0, 0, 0, 0.65)]从 Facebook 的 Reactive Native,再到 Google 的 Flutter,足以看出,起码对这些科技巨头们来说,他们是认定这个方向,并且在投入的,只是当下技术还不够成熟,所以这类前端跨平台开发框架都还不够普及,但是你们得相信,这些巨头的判断与实力。
[color=rgba(0, 0, 0, 0.65)]再说到国内各种平台的小程序,微信小程序、支付宝小程序等等,其实都是属于真正意义的大前端,所以前端开发人员,以后的要求会越来越全面,你别觉得不信,等着未来的发展就知道了,以后很可能一个前端开发必须是全栈前端。
[color=rgba(0, 0, 0, 0.65)]所以,每一个大前端开发,最好都懂点前端开发知识,而基本的 web 前端开发基础就显得很重要了。
[color=rgba(0, 0, 0, 0.65)]我常遇到一些工作多年的前端工程师,在看到一些我认为很基础的用法时,发出惊呼:「怎么还可以这样」。
[color=rgba(0, 0, 0, 0.65)]因为很多同学学前端的方式是「土法学前端」,他们对于知识的理解基本都停留在点上,从来没有对前端的知识体系和底层原理形成真正地理解。
[color=rgba(0, 0, 0, 0.65)]加上前端标准的快速更新,前端工程师的学习压力变得越来越大了。就拿 JavaScript 标准来说,ES6 中引入的新特性超过了过去十年的总和,新特性带来的实践就更多了,仅仅是一个 Proxy 特性的引入,就支持了 VueJS 从 2.0 到 3.0 的内核原理完全升级。
[color=rgba(0, 0, 0, 0.65)]许多前端程序员都有感触:学习速度跟不上技术发展速度,而手忙脚乱、力不从心。
[color=rgba(0, 0, 0, 0.65)]这个现象,在一些小公司的前端工程师身上尤为明显,一些有技术追求的工程师,技术敏感度和主观能动性都不错,工作了五六年之后,逐步走上技术管理的岗位。但因他们所在公司的业务并不复杂,缺少框架知识积累,个人技术仍处于比较初级的阶段。做了管理,技术没跟上,还错过了最佳的学习时间,境遇可想而知。
[color=rgba(0, 0, 0, 0.65)]工作压力大,技术更迭快,让很多前端开发者高呼「学不动了」。其实不是你学不动了,而是你的知识体系底层构建出现了问题。
[color=rgba(0, 0, 0, 0.65)]目前在国内,不少一线互联网公司比如美团点评、饿了么、网易杭研都有叫大前端的团队或者在对外时使用该称谓,不过,由于之前大前端并没有明确的定义,这些团队的人员构成并不相同,它们都是各个公司在自己对大前端的理解,以及对公司业务的支持需求下设立的。具体情况如下(可能有偏差):
美团点评大前端团队:包括 FE、iOS、Android 开发,以及一些工程化工作。
饿了么大前端团队:以 FE 为主,包括 Node.js,以及 Weex 等。
网易杭研大前端团队:包含 Web 前端、PC 客户端和移动端。
[color=rgba(0, 0, 0, 0.65)]从这些一线互联网公司团队组建方式的演进,我们不难发现,大前端已经是未来发展的潮流。
[color=rgba(0, 0, 0, 0.65)]
image.png

[color=rgba(0, 0, 0, 0.65)]大前端技术开发者的晋级之路怎么走?
[color=rgba(0, 0, 0, 0.65)]作为一位在大前端时代的前端技术开发者,我们应该做怎样的准备来及时跟上技术发展的浪潮?综上所述,我们不难得出以下结论:
[color=rgba(0, 0, 0, 0.65)]基于 Node.js 的前后段分离设计模式是大前端架构演变的必由之路
[color=rgba(0, 0, 0, 0.65)]基于 React Native 的新一代移动 App 开发技术凭借其优势已然有超越原生的趋势
[color=rgba(0, 0, 0, 0.65)]新型大前端团队的组建已成现代互联网公司技术团队的标配
[color=rgba(0, 0, 0, 0.65)]如果你是一位工作1年左右的前端开发者,你需要提升自己,给你一些建议:
[color=rgba(0, 0, 0, 0.65)]1.深入理解前后端分离理论与实践:
  • [ ] 传统web研发模式
  • [ ] 什么是前后端分离
  • [ ] 前后端分离的几种形式
  • [ ] 前后端分离的部署架构
  • [ ] 前端后端分离开发模式
  • [ ] 分离式架构数据接口规范
  • [ ] 基于Node.js的前后端分离
[color=rgba(0, 0, 0, 0.65)]2.Node.js技术进阶与实战
  • [ ] 从0到1理解Node.js HTTP模块的本质
  • [ ] 如何一步步从HTTP模块开发成Koa框架
  • [ ] Koa Web框架的中间件系统
  • [ ] 常见的适合Node.js开发场景和其所扮演的角色
  • [ ] 利用Node.js开发APL接口
  • [ ] SSR服务器端渲染技术
  • [ ] 如何选择适合业务的开发模式
  • [ ] 利用Node.js做性能分析
  • [ ] Node.js常见的开发部署架构
  • [ ] 利用Node.js实现产品监控
[color=rgba(0, 0, 0, 0.65)]3.深度掌握 React Native 技术
  • [ ] React Native 的基本架构及原理
  • [ ] 关于热更新的概念及实践
  • [ ] 如何集成到现有原生应用
  • [ ] 编码规范标准化(项目结构、ESLint、Flow/TypeScript)
  • [ ] Redux 架构的原理及应用
  • [ ] 跨平台开发常见的思维陷阱与技巧
  • [ ] React/React Native 新特性与展望
[color=rgba(0, 0, 0, 0.65)]如果你是一个小白,想从0开始学习前端,你可以根据以下学习路线来学习web前端开发,最后祝所有程序员都能够走上人生巅峰,让代码将梦想照进现实
[color=rgba(0, 0, 0, 0.65)]自己是一个五年的前端工程师
这里推荐一下我的前端学习交流群:731771211,里面都是学习前端的从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴。不定时更新技术,与企业需求同步。好友都在里面交流,每天都会有大牛定时讲解前端技术!
[color=rgba(0, 0, 0, 0.65)]点击:加入
[color=rgba(0, 0, 0, 0.65)]



您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

TOP技术积分榜 社区积分榜 徽章 团队 统计 知识索引树 积分竞拍 文本模式 帮助
  ITPUB首页 | ITPUB论坛 | 数据库技术 | 企业信息化 | 开发技术 | 微软技术 | 软件工程与项目管理 | IBM技术园地 | 行业纵向讨论 | IT招聘 | IT文档
  ChinaUnix | ChinaUnix博客 | ChinaUnix论坛
CopyRight 1999-2011 itpub.net All Right Reserved. 北京盛拓优讯信息技术有限公司版权所有 联系我们 
京ICP备09055130号-4  北京市公安局海淀分局网监中心备案编号:11010802021510 广播电视节目制作经营许可证:编号(京)字第1149号
  
快速回复 返回顶部 返回列表