前端技术多且杂,那么作为前端开发者,我们可以从那些方面进行进阶提升呢?本文从以下几个方面进行了整理归纳
内容如下:
- 一.网页开发
- 二.小程序
- 三.移动端
- 四.桌面端
- 五.其他技术
一.网页开发
这里指PC端网页开发,要求的技术主要有以下几类:
1.Vue、React 和 Angular
作为 MVVM 前端框架的三大巨头,在招聘信息中,基本都要求熟练掌握其中一种框架,并了解其原理。它们各自有各自的优点,Vue 使用便捷简单,React 编码更加灵活,Angular 则注重包容性。就流行程度而言,Vue 和 React 在国内更加受欢迎,所以我们在学习的时候可以优先选择这两个。
2.jQuery
曾经前端界的扛把子,那时前端还没得这么多五花八门的技术和框架,基本只要熟练掌握了 jQuery 就完全能找到工作了。这些年虽然一直在唱衰它,但现在仍然能在很多 C端产品上看到它的身影。
3.响应式开发
很多公司的门户网站基本会用到这个技术,这样可以节约成本。这项技术一般适用于简单网页,复杂网页做响应式比较困难,而且体验也不是很好。相关框架 BootStrap等。
二.小程序
小程序这块一般指微信小程序,当然还有支付宝、百度、头条和QQ等一系列小程序。下面我们就微信小程序为主,讲讲都有哪些开发方式。
1.微信小程序原生开发
官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/
在微信小程序早期的时候,有许多问题:没有自定义组件、UI控制自由度不高、ES6支持度不高、开发工具不好用等系列问题,这也是导致第三方框架层出不穷的原因之一。当然,经过这些年发展,很多问题已得到解决。所以,如果没有多端的要求,完全可以采用原生开发的形式。
2.uni-app
官方文档:uni-app官网
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。
3.Taro
官方文档:Taro 介绍 | Taro 文档
Taro 是一套遵循 React 语法规范的 多端开发 解决方案。使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信/百度/支付宝/字节跳动/QQ/京东小程序、快应用、H5、React-Native 等)运行的代码。
4.其他
其他的小程序开发框架我觉得都没得太大的优势,以前比较流行的框架比如 mpvue 。
5.云开发
开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。
云开发为开发者提供完整的原生云端支持和微信服务支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。
据说云开发在未来很有潜力,有兴趣的不妨去了解了解。
三.移动端
包含 Web App、Android App 和 IOS App。开发方式有以下两种。
1.Native App
即原生APP开发模式,利用iOS、Android开发平台官方提供的开发工具进行APP的开发。
2.Hybrid App
Hybrid App(混合模式移动应用)是指介于 web-app、native-app 这两者之间的 app,兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。
主流开发框架有:
1).RN(React Native)
官方文档:React Native 中文网 · 使用React来编写原生应用的框架
React Native使你只使用JavaScript也能编写原生移动应用。 它在设计原理上和React一致,通过声明式的组件机制来搭建丰富多彩的用户界面。
React Native产出的并不是“网页应用”, 或者说“HTML5应用”,又或者“混合应用”。 最终产品是一个真正的移动应用,从使用感受上和用Objective-C或Java编写的应用相比几乎是无法区分的。 React Native所使用的基础UI组件和原生应用完全一致。
与之对应的框架 Weex,支持 Vue.js 。这里没有单独列出来,因为它已经内置到 uni-app 中了。
2).Flutter
官方文档:Flutter中文网
Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。
当然,前面提到的 uni-app、Taro 也可用来开发 App,除此之外还有 Weex 等框架...
这里再推荐一篇 RN、Flutter 和 uni-app 之间的比较的文章:flutter、rn、uni-app比较 - DCloud问答
四.桌面端
桌面端开发框架也非常多,就前端而言,这里推荐下面这个框架
1.Electron
官方文档:Electron | Build cross-platform desktop apps with JavaScript, HTML, and CSS.
Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的。
这里再推荐一个 Tauri 框架ya,不过这个框架相对而言学习成本要高不少,需要去学习 Rust 语言相关的知识。
五.其他技术
1.TypeScript
官方文档:TypeScript中文网 · TypeScript——JavaScript的超集
TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准。TypeScript 由微软开发的自由和开源的编程语言。TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。
现在有很多公司都要求开发者掌握 TypeScript。
2.前端工程化
作为前端工程师,我们需要具备工程化思想,并掌握相关框架的使用,如:Webpack、Vite、Gulp、Grunt 等。
3.算法,设计模式
一般大些的公司都要求我们掌握一些常用的算法和设计模式。
4.网络、安全
http、跨域、CSRF(跨站请求伪造)、XSS(跨域脚本攻击)等。
5.Node.js
简单的说 Node.js 就是运行在服务端的 JavaScript。最近 Node.js 的作者又出了一个和 node 相似的 deno => De(Destroy)no(Node),可简单的理解为 node 的升级版,以解决 node 中存在的难以解决的问题。
6.数据可视化
相关技术和框架:SVG、Canvas、WebGL;Echarts(可视化图表库)、Three.js(主流 3D 绘图 JS 引擎)、Cesium(跨平台、跨浏览器的展示三维地球和地图的 JS 库)等。
一些第三方的数据大屏:阿里云-DataV、腾讯云图
7.微前端
早期实现微前端是通过 iframe,但 iframe 更适合静态、纯展示类的页面,对于交互性强的应用并不适合。
微前端的好处在于各个微应用之间彼此独立(独立开发、独立部署、技术栈无关)。
复杂的中后台应用中,适合采用微前端进行开发,以避免后期项目难以维护。
常用微前端框架:
8.PWA
PWA 全称 Progressive Web App,即渐进式 WEB 应用。
优点:
- 可以添加至主屏幕,点击主屏幕图标可以实现启动动画以及隐藏地址栏
- 实现离线缓存功能,即使用户手机没有网络,依然可以使用一些离线功能
- 实现了消息推送
9.前端自动化测试
常用框架:Jest
一些相关专业名词:
- TDD,Test Driven Development 测试驱动开发
- BDD,Behavior Driven Development 行为驱动开发
常见组合:
- Vue + Vue-test-utils
- React + Enzyme
10.更多
这里就不在继续往下写了,因为太多了,比如:游戏、视频、直播、图形处理等方面,还有 AR(增强现实)、VR(虚拟现实)等。