随着移动互联网的兴起，前端简直是搭载着东风快递在飞速发展着，前端们表示已经真的快要学不动了。前后端分离开发也没有几年，所以前端这个领域在程序届还是一个萌新，大量的新知识，新技术都井喷式的爆发。长江后浪推前浪，前浪被拍死在沙滩这样的情景在前端圈，大家已经习以为常。网站易于传播等的特点，注定前端会比较契合互联网开发。那么，经过这几年的发展，前端都能做些什么呢？下面为大家列举一些前端常用的领域。

一、H5活动页面

        移动互联网时代，流量为王。每逢节假日，各大厂家的运营们会想着花的去做活动方案，来拉取新用户，移动web页面好像就是为了这个时刻而出现。我们经常见到的H5页面有：抽奖、测试题、榜单、APP中用来引流的促销活动、小游戏等。

H5页面有以下特点：

1、易传播：互联网时代，只需要一个url地址，任何浏览器中都能打开你想看到的网页，只需往社交平台发布一条分享的链接，所有的好友都能看的见。这种传播速度和传播方式，正好契合活动拉新的需求。

2、快速迭代：网页能够实现快速迭代，不需要发版、审核等繁琐的步骤。

3、无需下载：用户不需要下载，就能够打开web app。

        根据以上所列举的H5的特点，越来越多的公司开始采用混合开发的方式来降低程序开发的成本，使用原生端开发App框架，App中内嵌网页，这样能够高效的实现内容的迭代。随着前端技术的发展，将来替代原生开发也不是不可能哈~ 但是目前web的体验和原生还是有很大的差距，所以在技术选型上，大家还是得需要依据需求来决定是否要大量使用H5来承载app内容。

二、跨平台移动应用开发

        上文提到了H5页面和原生端的应用还是有很大的体验差距，主要是体现在，传统的IOS和Android开发能够很好的和系统兼容，能够利用系统提供的一系列api，而这些能力都是web不存在的，这个时候跨平台移动应用开发框架诞生了，现在发展生态比较良好的有React Native和 Flutter

你是否有用过Instagram、Airbnb、闲鱼等APP？

        这些制作精良，拥有大体量用户的APP，其实都是通过ReactNative开发，是不是感觉很牛的样子。JS语言竟然还可以开发原生的APP，这真是是前所未闻的事情。

那么ReactNative是什么呢？

        React Native是Facebook开源的跨平台移动应用开发框架，目前支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

        React Native使你能够在Javascript和React的基础上获得完全一致的开发体验，构建世界一流的原生APP。

React Native 的优势

1、跨平台开发：React Native 只需要同一套javascript 代码就可以运行于ios 和 android 两个平台，在开发、测试和维护的成本上要低很多。

2、易发布：React Native 可以通过 JSBundle 即时更新 App。避免了审核、发布等过程。

3、布局方便： React Native 可以直接使用CSS来进行样式的布局，完全套用网页开发的方式，没有任何学习成本。

4、简单易学。如果你曾经开发过网页，那么对于 Javascript 本来就有相应了解，学习ReactNative就只剩下掌握React框架，如果你之前使用React开发网页，那么几乎没有成本，只需要掌握一些原生开发的基本原则就好。

5、摒弃WebView：为了实现app的高速开发，我们会使用混合开发这种方式，app中的一些页面使用WebView来加载网页展示，但是这样的显示效果和交互效果差强人意，使ReactNative开发不会存在这些问题

React Native 的缺点

1、不能同步更新：每次苹果或者安卓系统更新后，React Native都不能第一时间使用和兼容新特性，需要等待FaceBook去更新版本实现兼容

2、需要原生开发能力： 现在React Native以及社区中提供的一些组件，区分了安卓和IOS，所以并没有实现真正的一套代码，多端复用。在开发的过程中，对原生的一些api有一定的依赖，所以还是需要掌握一些原生开发的能力。

        所以RN的特点也很明显，所有如果需要快速开发，且业务功能相较简单的情况下，可以考虑使用React Native来进行开发。

        提到React Native又怎么能少了Flutter呢？

        Flutter和React Native一样，也可以实现安卓和IOS应用的开发且不止这些。也是谷歌新的操作系统的UI框架，这个操作系统将来可以有望取代安卓系统的哟，所以谷歌对自己这个新儿子的重视程度，不言自明。

        Flutter使用Dart语言进行开发，Flutter框架的整个开发方式也和网页开发中使用的HTML+JS+CSS的方式有很大的不同，但是程序员总是在拥抱着这个时代的变化。

        相比较原生开发的程序员来上手Flutter，前端开发的同学们有很大的优势。

        语言相近: Dart和TypeScript在语法上非常相似，不需要太多学习成本，就能够实现TS-Dart切换

        开发框架相似：Flutter整个开发理念和React十分相似，比如状态管理、数据流向、组件开发等。

        目前Flutter已经到了1.9版本，而ReactNative至今没有发布1.0版本，随着他们的更新，将来一定会拥有更好的开发体验，并且被更多的开发者所接受。

三、小程序

        上面说到了H5活动页面和原生应用的开发，虽然他们已经能够涵盖很多应用场景的需求，但是还是有一部分痛点没有能够很好的解决。H5的问题在于和系统交互的能力比较弱，需要搭载原生平台才能实现一些比较高级的功能。原生的问题是，用户的使用成本比较高，首先需要去下载app才能够使用。那么有没有什么技术能够解决上述的两个问题呢？这个时候小程序爆发了。

小程序其实已经渗透到我们每一个人的生活中，只是你可能未察觉而已。怎么？你说你没用过？

跳一跳玩过没？

谷歌小歌玩过没？

扫码点餐用过没？

扫码骑车用过没？

还有很多的小程序，都在我们不经意间，通过App这个入口进行了访问和使用。目前已经有很多app都推出了对小程序的支持，以便能够形成自己的应用的闭环。

什么是小程序呢？

        小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。对于开发者而言，小程序开发门槛相对较低，难度不及APP，能够满足简单的基础应用，适合生活服务类线下商铺以及非刚需低频应用的转换。

        小程序是一种不需要安装即可使用的应用，大大降低了用户的使用下载成本。对于开发者而言，开发难度较低，没有原生APP开发那么复杂。在传播上，结合宿主app所提供的社交传播的能力，小程序具备传播速度快的特点。

小程序这么方便，那么它和前端人员有什么关系呢？

        目前小程序常用的开发框架有mpvue、taro等。mpvue是一套遵循Vue语法规范的多端开发的解决方案、taro 是一套遵循 React 语法规范的多端开发解决方案。所以只要你会使用Vue或者React，那么小程序的开发也就不是什么难事了，最多需要去看看文档，查看下宿主app提供的相关api就好

小游戏

上面说完了前端如何开发小程序，现在我们来说一说前端如何开发小游戏。

        目前市面上做小游戏的引擎有cocos2d、白鹭等，将来可以能还会有更多的引擎来支持小程序的开发。上面提到的两个游戏引擎都可以使用JS来开发游戏！！所以有JS的地方，就有我们前端程序员。

        随着移动互联网的发展，前端技术在移动端发展的可谓是如火如荼，就好比上文提到的ReactNative与小程序，近两年完全有将前端开发搬到移动端的势头。但是这两年前端客户端技术也可谓是方兴未艾，那么接下来让我们一起了解一下近两年有哪些比较火热的客户端技术吧。

四、PWA

PWA是什么？

        PWA(Progressive web app)，即渐进式web应用。从名字我们可以看出来，它并不是一项新技术，而是web应用的一种新形态。PWA配合一些web新特性，比如service worker，增强了web应用的用户体验，并使网站拥有像原生app一样的体验，例如：

1、Cache Api 离线缓存

2、Notification 消息通知与推送

3、添加应用图标至主屏幕

4、全屏模式运行

PWA有哪些优势呢？

PWA作为自带原生应用app的web应用，可谓是集成了web应用与native应用各自的优点：

1、和原生app相比，PWA有着与生俱来的优势。

2、开发成本低 - PWA追根到底还是web app，既然是web app肯定离不开html，css，javascript三驾马车，这可是前端工程师的主战场。

3、无需等待审核 - 传统桌面app都需要通过app应用商店进行审核，等待时间长，而PWA只需要你输入网址，即可使用，方便快捷。

4、资源占用低 - 原生app安装包一般都要几十m，动辄就要上百m，并且有些app需要频繁更新，PWA则不存在这种问题。

和传统web应用相比，PWA又有着以下优点：

1、响应快，可靠 - 传统web应用由于javascript体积过大的原因导致页面首屏加载慢，白屏时间长。一般加载时间超过3s就会有过半用户放弃等待。PWA利用service worker控制资源缓存以及请求逻辑，控制对关键资源的缓存，有效减少白屏时间，降低了对网络的依赖。

2、原生体验 - 用户可以将PWA应用安装在设备主屏幕上，无需从应用商店下载。并且有全屏，消息通知推送等功能。使用web技术给予用户一种原生app的体验。

PWA的劣势

PWA毕竟起步较晚，厂商设备支持并不是很全面，目前还是存在一些缺陷：

1、PWA毕竟是web应用，javascript调用原生api存在很大的安全风险，所以pwa目前还不能支持所有的原生应用功能。

2、PWA应用起步较晚，浏览器厂商对pwa支持并不完善。

PWA的应用

PWA从2018年发展到现在短短的时间里，便受到很多浏览器厂商以及广大前端爱好者青睐。各类pwa应用也像雨后春笋般涌现。

微博：微博算是对pwa支持的比较早，比起客户端，减少了很多的广告以及我们平时不太关注的功能，界面更加清爽，纯净。

Preact： 说起preact，可能大家不太熟悉，但提到react，前端开发者们一定不会觉得陌生。preact就是react的精简版，preact的官网便支持pwa，可以允许我们随时随地离线进行学习。

除了上面提到的两个pwa应用，还有像谷歌地图，推特，ins等著名的网站也都在支持pwa呢。

虽然pwa已经有了一定规模的应用，也在前端圈引起了一阵旋风，但由于pwa自身存在的问题使得它并没有取代原生app的能力。说到前端在原生应用方面的发展，那就不得不提另外一项新技术-Electron。

五、Electron

        Javascript在诞生之初就只是作为一门浏览器端的脚本语言存在，随着各种前端框架的层出不穷，使得web应用程序在这几年来大放异彩。然而桌面应用程序一直被c++，c#等编程语言占据，Js与之相比就显得相形见绌了。虽然出现了像NW.js，Enyo等跨平台开发框架，但由于存在功能欠缺，使用难度高等问题，使得js桌面应用开发一直没有普及开来。而Electron的问世，打破了这一局面。

Electron是什么？

Electron于2013年由github开发出来，并于2014年开源，是一套允许用户使用html， css，javascript构建桌面应用的开源框架。

Electron是集成了nodejs与chromium的桌面应用开发框架，通过使用electron，您可以很轻松的使用html，css，javascript构建跨平台的桌面应用程序。

Electron有很多内置功能：

1、自动更新： electron官方支持使用内置的Squirrel框架和autoUpdater模块来对应用进行 自动更新；

2、原生API： electron内置了非常多的api允许您使用javascript来操作原生系统，例如调取菜单，操作文件系统，向用户发出通知等等；

3、App崩溃报告： 您的app崩溃报告可以提交到远程服务器；

4、调试与分析： chromium是精简版的chrome浏览器，您可以使用chromium内置的调试器对您的应用程序进程调试分析。

5、打包发布： Electron社区提供了第三方打包工具，这些打包工具包含发布一个electron应用的所有功能：打包应用程序，重组可执行程序，设置图标和可配置的安装程序等。

Electron的应用

        上面我们已经简单介绍了electron，但您可能对他是否能开发大型项目抱持着一些怀疑态度。那么接下来让我们来了解一下electron在各大平台上面的应用来打消您的疑虑。

VScode：作为一名前端工程您肯定对VScode不会陌生的。没错，它就是使用electron开发出来的。VScode内部集成了git，实现了语法高亮，自动补全等功能，一经微软开源便成为前端工程师不可或缺的工具。

Skype：Skype是一款即时通讯软件，是最受欢迎的网络电话之一，全球拥有6.63亿用户，可在电脑、手机、电视、PSV等多种终端上使用。

除了上述两个最著名的，还有很多electron应用在桌面平台上大放异彩。

Electron现状与发展

Electron目前发展的可谓是如火如荼，已经被国内外各大厂商所接纳。虽然桌面应用份额无法与传统桌面软件比拟，但由于其使用html，css，js进行开发，深受广大前端工程师的喜爱。再加上其易开发，跨平台，api丰富等优势，相信其在桌面应用的战场上一定会大有可为。

大家有没有想过使用Javascript开发后台应用会是一番怎样的光景呢？前面讲到的技术虽然都是最近几年非常火爆的，但始终没有突破JS只能在客户端应用的这一藩篱。接下来，让我们来聊一聊NodeJS是如何将前端工程师的舞台迁至服务端的。

六、NodeJS

NodeJS的起源与发展

对于很多刚刚接触前端的小伙伴，提起javascript，可能第一时间想到的浏览器端的脚本语言。但是随着2019年Ryan Dahl在github上发布第一版NodeJS以及2011年微软支持发布windows版本，其在服务器端的发展可谓是突飞猛进。再加上js一直作为前端开发的编程语言，很多前端程序员将视线转移到服务端，从而使NodeJS迸发出强大的生命力。目前国内外很多大型网站例如netflix，淘宝都在使用基于NodeJS的web服务，很多小型互联网企业也以NodeJS作为服务端的首选。

前端工程化

NodeJS不仅仅是把前端主战场转移至后台开发，同时也催生了前端的工程化，可以说目前各类的前端工程化工具基本都需要依托NodeJS作为基础环境。早期的前端被戏称为“切图仔”，是因为前端刚刚起步时网站功能都比较单一，并不需要写太多的javascript，只用html和css“画”出页面即可，并且很多前端都由设计师兼职。发展到后来越来越多的逻辑迁移至前端，前端身上的担子越来越重。就在这时各种前端框架如React，Vue, Angular出现了，使得前端们可以用更少的代码做更多的事。与此同时出现了一批像rollup，webpack等一批优秀的前端打包工具，前端工程化的概念就此成型。

NodeJS的优劣势

        在NodeJS推出之前就已经存在很多成熟的服务器开发语言，java，php等目前也保有着很庞大的市场份额。NodeJS能够异军突起必然是存在着它自己的优势，下面让我们来列举一下NodeJS服务端开发的一些优点和缺点。

优势：

使用NodeJS开发服务器归根结底还是使用js来编写代码，熟悉前端开发的同学自然对js已经轻车熟路，向后端迁移学习成本较低。

NodeJS的单线程模式促使程序执行上下文不需要向其他服务器端语言一样切换运行时上下文,运行状态加锁,解锁等操作。

NodeJS本身采用异步io+事件循环模式，并且内部存在大量异步api，线程无须等待当前任务执行完便可执行下个任务，有效防止线程阻塞的问题，非常适合io密集型操作。

劣势：

因为NodeJS采用事件循环模式，意味着需要不停的轮询事件队列来来获取异步执行结果，当事件非常多时，对服务器cpu会是一个很大的挑战

由于NodeJS是服务端开发平台的新贵，在应用范围，插件数量上确实很难和java这种老牌语言相比。

NodeJS前景

        NodeJS作为服务端开发的后起之秀，具有使用javascript作为开发语言这一得天独厚的优势，深受广大国内外开发者的喜爱，国内大大小小的互联网公司也将node开发作为前端开发者的必备技能。

结语

        上面写的这些，也只是我本人工作这两年所接触到的，所看到的前端的景象，这也只是前端中一部分，还有很多前端人员能够涉及到的领域，如果大家有兴趣的话，还需要大家去探索。写这篇文章的目的只是为了让那些不是很了解前端的程序员以及刚刚打算入前端这一行的程序员们，能够对前端目前的境况、所能涉及到的应用领域以及未来的发展趋势有一个大致的了解，能够起到一定的科普和传播的作用，那么我的目的也就达成了，文中有疏漏、错误的地方，还请各位大佬们多多包涵，加以指正。相信，在广大程序员的共同努力下，前端的未来一定会愈发明朗，AJAX和Node的出现为前端筑造了一个非常稳固的地基，相信未来，我们会站在前人的研究成果上，迎来前端的下一个春天。