大前端发展趋势指南教程_发展小白基础

近年来,Web 应用在整个软件与互联网行业承载的责任越来越重,软件复杂度和维护成本越来越高,Web 技术,尤其是 Web 客户端技术,迎来了爆发式的发展。1.用Node做中间层的前端工程化方案2.Webpack、Rollup 这样的打包工具;Babel、PostCSS 这样的转译工具3.前端三架马车React、Angular、Vue 这样面向现代 web 应

大前端发展趋势指南教程

近年来,Web 应用在整个软件与互联网行业承载的责任越来越重,软件复杂度和维护成本越来越高,Web 技术,尤其是 Web 客户端技术,迎来了爆发式的发展。

大前端发展趋势指南教程_发展小白基础

当然了,所谓的趋势,不是一天两天就到来的,它是未来的一个技术方向,我们之所以关注趋势,是要关注变化,技术的发展与普及不是一日之功,一定是慢慢过渡的,但是你能够比其他人提前看到方向,真正的市场到来的时候,你就可以提前做好准备,提前发掘机会。

从 Facebook 的 Reactive Native,再到 Google 的 Flutter,足以看出,起码对这些科技巨头们来说,他们是认定这个方向,并且在投入的,只是当下技术还不够成熟,所以这类前端跨平台开发框架都还不够普及,但是你们得相信,这些巨头的判断与实力。

再说到国内各种平台的小程序,微信小程序、支付宝小程序等等,其实都是属于真正意义的大前端,所以前端开发人员,以后的要求会越来越全面,你别觉得不信,等着未来的发展就知道了,以后很可能一个前端开发必须是全栈前端。

TypeScript 使用率激增

2019 年是 TypeScript 之年。TypeScript 不仅成为了在 JS 代码中添加数据类型的事实选择,而且许多开发人员会经常在个人项目和工作中,用它来代替普通的 JavaScript。

在 2019 年初发布的 StackOverflow 调查中,TypeScript 与 Python 并列最受欢迎语言次席,仅次于 Rust。如果我们看到 TypeScript 的排名再进一步,应该也不会有什么奇怪。

TypeScript 已经席卷了整个 Web 开发世界——前端和后端皆是如此。一些开发人员认为 TS 只是跟风炒作的产物,觉得它会步 CoffeeScript 后尘;但 TypeScript 已被证明可以解决 JS 开发人员面临的一大核心问题,而且它的使用率看来只增不减。TypeScript 与所有主流文本编辑器的集成,为 Web 开发人员提供了更好的开发体验。JavaScript 开发人员将 TypeScript 视为一种工具,它可以减少错误,还可以通过(提供自带描述的)类型和对象接口更轻松地读取代码。

值得注意的是,TypeScript 在 2019 年的 NPM 下载量超越了 React,其流行程度可见一斑。此外,它的下载量也比 Flow 和 Reason 等竞争对手高得多。

下一代Web应用:PWA

老生常谈,我们先对比一下生活中WebAPP 和 原生APP的优劣

web APP 对比 原生APP 的优势,开发成本低,适配多种移动设备,不用IOS 安卓多套代码,迭代更新容易,省去了审核、发包、各种渠道发布带来的时间损耗,无需安装成本,拿来即用

当然原生APP也有它独到的优势,这些web app所没有的优势我们也不知道以后会不会有突破!

PWA解决的问题

能够显著提高应用加载速度

甚至让 web 应用可以在离线环境使用  (Service Worker)

web 应用能够像原生应用一样被添加到主屏、全屏执行 (Web App Manifest)

进一步提高 web 应用与操作系统集成能力,让 web 应用能在未被激活时发起推送通知 (Push API 与 Notification API) 等等。

推送Push Notification

Push API 的出现则让推送服务具备了向 web 应用推送消息的能力,它定义了 web 应用如何向推送服务发起订阅、如何响应推送消息,以及 web 应用、应用服务器与推送服务之间的鉴权与加密机制;由于 Push API 并不依赖 web 应用与浏览器 UI 存活,所以即使是在 web 应用与浏览器未被用户打开的时候,也可以通过后台进程接受推送消息并调用 Notification API 向用户发出通知

WebAssembly

什么是WebAssembly

WebAssembly 是由主流浏览器厂商组成的 W3C 社区团体 制定的一个新的规范。

它的缩写是”.wasm”,.wasm 为文件名后缀,是一种新的底层安全的二进制语法。

可以接近原生的性能运行,并为诸如C / C ++等语言提供一个编译目标,以便它们可以在Web上运行。它也被设计为可以与JavaScript共存,允许两者一起工作。

能突破前端3D game  、 VR/AR 、 机器视觉、图像处理等运行速度瓶颈

WebAssembly 是一种新的字节码格式,目前主流浏览器都已经支WebAssembly。和 JS 需要解释执行不同的是,WebAssembly 字节码和底层机器码很相似,可以快速装载运行,因此性能相对于 JS 解释执行而言有了极大的提升。也就是说WebAssembly 并不是一门编程语言,而是一份字节码标准,需要用高级编程语言编译出字节码放到 WebAssembly 虚拟机中才能运行, 浏览器厂商需要做的就是根据 WebAssembly 规范实现虚拟机。

有了 WebAssembly,在浏览器上可以跑任何语言。从 Coffee 到 TypeScript,到 Babel,这些都是需要转译为 js 才能被执行的,而 WebAssembly 是在浏览器里嵌入 vm,直接执行,不需要转译,执行效率自然高得多。

举个例子,AutoCAD 软件是由美国欧特克有限公司(Autodesk)出品的一款自动计算机辅助设计软件,可以用于绘制二维制图和基本三维设计。使用它时,无需懂得编程,即可自动制图,因此它在全球被广泛应用于土木建筑、装饰装潢、工业制图、工程制图、电子工业、服装加工等诸多领域。

AutoCAD 是由大量 C++ 代码编写的软件,经历了非常多的技术变革,从桌面到移动端再到 web。之前,InfoQ 上有一个演讲,题目是《AutoCAD & WebAssembly: Moving a 30 Year Code Base to the Web》,即通过 WebAssembly,让很多年代久远的 C++ 代码在 Web 上可以运行,并且保证了执行效率。

hrome 的核心 JavaScript 引擎 V8 目前已包含了 Liftoff 这一新款 WebAssembly baseline 编译器。Liftoff 简单快速的代码生成器极大地提升了 WebAssembly 应用的启动速度。2019年,很多的公司都开始投入人力进行WebAssembly的学习个改造,相信WebAssembly会经历爆发式期。

Serverless

Serverless 的火爆是乎可以归因于前端。因为 Serverless 能够较完美的⽀持Node.js,使⽤ Serverless 帮助前端开发者解决了使用Node.js 过程中的诸多问题。当前的前端工程师大多都是科班出身,虽不能和正宗的服务端开发同学比,但也可写很多服务端层的业务逻辑。当前已经有很多公司在做 BFF 层,来满足这部分诉求,但依旧摆脱不掉运维、机器分配 这条拦路虎。随着 Serverless 的逐步落地,BFF 这层的代码会摆脱运维、机器分配等复杂的问题,同时大概率会由前端同学写这部分代码,服务端同学专注中台系统的实现。从业务上说,业务的试错成本也会大幅度降低。

随着 Node.js 成为前端开发者必备技能之后,云计算的不断普及会让Serverless 触不可及。当越来越多的开发者尝到研发⾼效的甜头之后,Serverless 必将对前端的研发模式产生变化

同时,使用Serverless的同学一定会使用 TS。这也意味着,不写 TS 可能真的就 Out 了。

展望

① TS 一定会在火的,现在用 TS 的感觉,让我感觉跟 vim 很像,刚开始用的时候很难受,一旦习惯了就离不开了。未来项目会越来越复杂,用了 TS 项目的风险会可控很多。

② 多注重框架原理,夯实深度,现在对于前端工程化,注重原理才能很好的应对未来的发展。

③ 眼界放宽、拓宽自己知识的广度,多做一些产品以及方向上的探索。

来自:https://blog.csdn.net/github_34708151/article/details/103760047

  1. 关注我的官网 https://muyiy.cn,让我们成为长期关系

  2. 关注公众号「高级前端进阶」,每周重点攻克一个前端面试重难点,公众号后台回复「面试题」 送你高级前端面试题。

海计划公众号
(0)
上一篇 2020/03/22 08:48
下一篇 2020/03/22 08:48

您可能感兴趣的内容

  • js数组、对象、字符串的遍历小白常识_遍历小白攻略

    数组遍历for –使用变量将数组长度缓存起来,在数组较长时性能优化效果明显for(var i=0,len=arr.length;i<len;i++){console.log("元素:"+arr[i]);
    }
    forEach –ES5语法,对数组的每个元素执行一次提供的函数,不能使用break、returnarr.forEach(function(item

    Web前端 2020/03/30
  • 猪八戒网指南攻略_领先的一站式企业外包服务平台

    猪八戒网指南攻略 官方网址:https://zbj.com/ 简介描述:领先的一站式企业外包服务平台 猪八戒网_领先的服务外包平台,其中服务品类涵盖LOGO设计、UI设计、营销推广…

    2020/03/06
  • JS 原生闭包模块化开发总结菜鸟知识_闭包小白教程

    一、闭包模块的第一种写法:// HH: 闭包类的第一种写法
    var PeopleClass = function () {var age = 18var name = ‘HAVENT’// 闭包返回公开对象return {getAge: function () {return age},getName: function () {return name}}

    2020/03/22
  • YeeLogo使用指南_在线简单LOGO制作工具

    YeeLogo使用指南 官方网址:http://yeelogo.com/ 简介描述:在线简单LOGO制作工具 “Yee Logo”是一个简单易用的免费logo在线制作平台,只需两分…

    2020/03/11
  • CSS3单位小白攻略_单位使用说明

    像 px、rem、em、% 这样的长度单位大家肯定都很熟悉,前者为绝对单位,后者为相对单位。CSS3 又引入了新单位:vw、vh、vmin、vmax。下面对它们做个详细介绍。单位作用特性px页面按精确像素展示绝对单位rem相对根节点html字体大小来计算相对单位em基准点为相对父节点字体的大小相对单位%相对于父元素的大小设定的比率相对单位vw视窗宽度的百分比

    2020/03/24
  • Js中call/apply/bind方法函数的原生实现菜鸟教程_this菜鸟指南

    call/apply/bind方法简介在JavaScript中,函数中this的指向往往在调用时才可确定,而JavaScript提供了call/apply/bind方法让我们得以显示绑定函数的this指向。它们的第一个参数是一个对象,它们会把这个对象绑定到调用他们的函数内的this。因为你可以直接指定 this 的绑定对象,因此我们称之为显式绑定。//用例

    2020/03/29
  • 给想转行作程序员的人泼一盆冷水入门基础知识_程序员入门基础教程

    最开始想写一篇《现在转行作程序员还来得及吗》,因为有不少朋友问我这个问题,但写着写着发现我一直在劝退,索性改了题目。*本文针对的是那些想要转行找到工作的同学,而不是纯粹兴趣想学编程的同学。所以现在转行到底来不来得及?我觉得:来得及,但风险很大。有的朋友动力足,现在已经转行成功入职 BAT,有的半工半学,还在挣扎中;有的去了培训班,马上毕业了;有的问完继续走原

    2020/03/29
  • React 错误边界使用帮助_错误入门百科

    错误边界介绍部分 UI 中的 JavaScript 错误不应该破坏整个应用程序。 为了解决 React 用户的这个问题,React 16 引入了一个 错误边界(Error Boundaries) 的新概念错误边界是 React 组件,它可以 在子组件树的任何位置捕获 JavaScript 错误,记录这些错误,并显示一个备用 UI ,而不是使整个组件树崩溃。

    2020/03/20
  • 网页图片不存在时不显示默认图片基础指南_图片菜鸟教程网

    当在页面显示的时候,万一图片被移动了位置或者丢失的话,将会在页面显示一个带X的图片,很是影响用户的体验。即使使用alt属性给出了”图片XX”的提示信息,也起不了多大作用。其实,可以这样处理:当图片不存在的时候,会触发onerror事件,我们可以在该事件中做一下补救的工作,比如:1、让这个图片元素隐藏:<img src="图片的url地址" alt="图片XX

    2020/03/31
  • vue ssr服务端渲染环境搭建基础入门_环境基础知识教程

    前言网上有关ssr开发环境搭建的文章不算多,就算找到也是比较高级的,不太适合新手入坑;这篇内容只抽取了其中最重要的部分,实现最基础的开发环境搭建;所谓开发环境无非两件事:自动打包·自动刷新页面,叫法比较土,也可以叫热更新,热加载。自动更新renderer先看目录结构没啥东西,新增了一个hot.config.js文件,用来放置热加载的配置;先看下server.

    2020/03/23
  • react-sortable-hoc入门知识_能将任意列表转换为可拖动排序的 React 高阶组件

    react-sortable-hoc入门知识 官方网址:https://clauderic.github.io/react-sortable-hoc/ GitHub:https:/…

    2020/03/06
  • AngularJS-Learning基础知识教程_AngularJS的学习资源

    AngularJS-Learning基础知识教程 GitHub:https://github.com/jmcunningham/AngularJS-Learning 简介描述:An…

    2020/03/11
  • 为什么在做微服务设计的时候需要DDD?小白入门_微服务小白帮助

    记得之前在规划和设计微服务架构的时候,张队长给了我一个至今依然记忆深刻的提示:『你的设计蓝图里为什么没有看到DDD的影子呢?』随着对充血模型的领域认知的加深,我越加感觉到DDD的重要性。但是DDD内容繁多,是不是要深入去了解呢,我觉得不必入坑太深,个人浅见,它最核心的一点就是针对贫血模型的不足而设计,把原先传统的贫血模型里的业务逻辑层拎出来,融入到Domai

    2020/03/20
  • 微信小程序之程序、页面注册及生命周期基础知识入门_小程序新手入门

    App()App() 函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等。object参数说明:属性类型描述触发时机onLaunchFunction生命周期函数–监听小程序初始化当小程序初始化完成时,会触发 onLaunch(全局只触发一次)onShowFunction生命周期函数–监听小程序显示当小程序启动,或从后台进入

    2020/04/05
  • Grunt之预处理基础指南_grunt小白知识

    一、grunt预处理简述grunt的注册任务函数本身会对传入的参数和配置对象里的相关属性进行一定的预处理,方便任务函数进行操作。grunt的registerTask方法和registerMultiTask方法会进行不同的预处理。二、预处理参数grunt命令通过grunt taskname:arg1:arg2形式的脚本来传入参数。grunt会给task对象增加

    2020/03/23
  • vue菜鸟从业记:没准备好的面试,那叫尬聊菜鸟攻略_面试使用帮助

    最近我的朋友王小闰参加了一场面试,在他填写简历表的时候,排在他前面的应聘者正在旁边邻桌接受来自面试官的检验。
    王小闰边写边想,这不就是一会儿要面试自己的前端leader么,现在面试官提问的一些面试题会不会就是待会儿要问自己的问题? 想到这,我朋友王小闰不自觉地竖起了耳朵听,借鉴下别人回答问题的经验,保不齐自己一会儿要套用一下。
    不听不知道,一听吓一跳。没准备

    2020/04/05