黑马程序员技术交流社区

标题: 【上海校区】给客户端同学的一份前端学习指南 [打印本页]

作者: 不二晨    时间: 2018-11-9 09:07
标题: 【上海校区】给客户端同学的一份前端学习指南
随着ReactNative、Weex与Flutter等跨端框架的发展,大前端的概念也逐渐普及开来,纯粹的Native开发相对变得比较少,前端也成为了客户端同学必须要掌握的一门技术,但是客户端同学做的是跨端开发,在学习路线上和前端同学又稍有不同,下面从客户端同学的视角去讨论如何学习前端知识。
这里为大家整理了一份跨端技术图谱,这份图谱并没有去穷尽所有的前端技术,只是从客户端开发的视角去梳理常用的技术点,帮助大家理清脉络。
更多关于跨端技术的讨论可以参见BeesFrontEnd项目。


开发工具IDE推荐VSCode,轻量级、插件丰富,常用插件如下所示:
更多关于VSCode的使用技巧可以参见强大的VSCode
前端基础对于客户端同学来说,要想上手React、Vue这些框架,需要先掌握HTML、CSS与JavaScript等基础知识,这部分的内容建议通过书籍来学习,一点一滴打捞基础,要有耐心。
HTML书籍:《HTML5权威指南》
CSS书籍:《CSS权威指南》、《精通CSS》
JavaScript书籍:《JavaScript高级程序设计》、《你不知道的Javascript》
除了基础的JavaScript知识,你还需要掌握ES6相关概念,这块可以参考ECMAScript 6 入门
NPM我们还需要了解NPM相关知识,NPM就像Android里的Maven仓库一样,它是一个JavaScript仓库。
Node.js的包管理工具。
前端框架Vue
Vue.js(读音 /vjuː/,类似于 view 的读音)是一套构建用户界面(user interface)的渐进式框架。
React
用于构建用户界面的 JavaScript 库。
跨端框架从PC时代开始,Native与Web就一直是相互竞争、相互融合的关系,我们先来简单看看它们之间的优势与劣势。
Native
Web

性能高

用户体验好

功能可以充分利用平台自身的能力
只有使用W3C的标准能力

迭代周期长,需要发布
周期短,随时发布

维护成本高

跨平台差

线程多线程
单线程
可以看出,Native与Web之间各有优劣,在移动互联网发展的过程中,开发者们也一直在寻找融合双方优势的方案,经历了以下四个阶段的发展:
注:值得一提的是,同层渲染现在已经逐渐在Android和iOS平台的WebView上实现,未来Hybrid会有更多的玩法。
ReactNative
使用JavaScript和React编写原生移动应用.
Weex
Weex是一个基于现代web开发经验构建高性能移动应用程序的框架。
Flutter
Flutter允许您通过一个代码库在iOS和Android上构建漂亮的本地应用程序。
小程序小程序也属于跨端框架的范畴,但它与Weex这些框架不同,比起像ReactNative这种技术创新,它更像是一种商业创新,它源于各大巨头对于流量与入口的竞争。详情可参见2018年上半年小程序生态白皮书
我们先就他们的技术方案做个简单的对比,如下所示:
事实上,小程序承载的更多是业务形态,我们从业务开发角度对小程序的前端架构做个总结。


微信小程序
小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。
支付宝小程序
支付宝小程序是一种全新的开放模式,它运行在支付宝客户端,可以被便捷地获取和传播,为终端用户提供更优的用户体验.
快应用
快应用是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。
淘宝小程序模块化任务管理器模块打包工具CSS预处理器静态检查器测试工具代码检测工具附录资源技术栈前端技术从底层到顶层一共可以分为20个,如下所示:
图片来源



【转载】
作者:郭孝星
链接:https://juejin.im/post/5be2c66df265da61715dd19b




作者: 不二晨    时间: 2018-11-14 15:34
~(。≧3≦)ノ⌒☆
作者: 魔都黑马少年梦    时间: 2018-11-15 16:40





欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2