精华内容
下载资源
问答
  • 大前端
    千次阅读
    2020-08-20 15:37:26

    大前端

    告别迷茫,全局认识大前端。带着大前端的全局思维,开始从项目需求分析到搭建环境,并学习MVVM框架和前端工程化,为后续开发做充实准备。

    自学整理

    获取团队高效协作密码

    良好的团队协作能力,是前端从单一技能通往大前端的必经之路。学习DevOps全流程,配合文档管理、版本管理、项目进度质量管理、自动化以及效率工具,领略开发之美,效率之道。

    打通全栈开发技能

    手把手带你开发社区全栈项目(PC端),重点掌握接口和数据库设计能力,综合中间件、
    数据库、服务器渲染知识,融合文档管理、版本控制,铺开前端全栈之路。

    前后端分离的后台管理系统

    采用前后端分离架构完成台管理系统开发,提高整体开发效率;打通社区全栈与后台管理系统,掌握从后台管理到前端展现的整体解决方案,完成从前端到大前端思维的演变。

    流行的WebApp与小程序开发

    本阶段将项目平移到WebApp和小程序,掌握一套业务系统,多应用场景的解决方案;结合从项目发布到维护迭代,打通开发全流程。最终进入大前端领域,扩展无限的可能。

    更多相关内容
  • 前端架构师-大前端

    2018-08-31 16:51:54
    整体角度来思考前端,让前端开发人员从宏观上人事大前端,了解前端未来走向
  • 大前端介绍

    千次阅读 2021-09-11 22:15:18
    简单来说,大前端就是所有前端的统称,比如Android、iOS、web、Watch等,最接近用户的那一层也就是UI层,然后将其统一起来,就是大前端大前端最大的特点在于一次开发,同时适用于所有平台,开发者不用为一个APP...

    前端介绍

    添加链接描述

    前端

    简单来说,大前端就是所有前端的统称,比如Android、iOS、web、Watch等,最接近用户的那一层也就是UI层,然后将其统一起来,就是大前端。大前端最大的特点在于一次开发,同时适用于所有平台,开发者不用为一个APP需要做Android和iOS两种模式而担心。大前端是web统一的时代,利用web不仅能开发出网站,更可以开发手机端web应用和移动端应用程序。

    为什么出现大前端

    由于node的出现,前端工程师不需要依赖于后端程序而直接运行,从而前后端分离起来。所以当开发一个新产品的时候服务只需要写一次,但是面向用户的产品可能有很多,例如网站、Android客户端、iOS客户端和微信小程序等。由于各个平台使用的技术栈都不一样,代码无法复用,非常浪费人力、物力。那么有没有什么技术能够解决这一痛点呢?大前端应运而生,其实大前端的主要核心就是跨平台技术,有了跨平台技术,各个平台的差异性就抹平了,开发者只需要一套技术栈就可以开发出适用于多个平台的客户端。

    前端涉及领域

    在这里插入图片描述

    混合APP

    在这里插入图片描述

    对比

    在这里插入图片描述

    web前端

    一、PC端的web : 在PC端电脑访问的web(网页网站) 页面一般固定宽度的 居中在网页显示 还有各种浏览器需要兼容。

    常见的移动web应用程序:淘宝网、小米官网、江西农业大学官网等等 这些都是在浏览器运行的web程序
    在这里插入图片描述

    二、移动端的web(web APP)

    在手机端访问的web 页面一般是全屏的 全屏在手机里面显示 在手机端的浏览器内核都是统一webkit 很少考虑浏览器兼容性问题
    在这里插入图片描述

    Hybrid App

    Hybrid APP指的是半原生半Web的混合类App,兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。 需要下载安装,看上去类似Native App,但只有很少的UI Web View,访问的内容是 Web 。 混合式 APP 目前有越来越火的趋势,一大原因是可以进行“热更新”,不再受限于审核、上线等等繁复的流程。

    AppStore里的电商类、新闻类APP,视频类APP普遍采取的是Native的框架,Web的内容。如淘宝、腾讯新闻、微信、淘宝、美团、爱奇艺等等。
    在这里插入图片描述

    Native App

    Native App是一种基于智能手机本地操作系统如iOS、Android、WP并使用原生程式编写运行的第三方应用程序,也叫本地app。一般使用的开发语言为JAVA、C++、Objective-C。

    目前较为成熟,各大公司均采用此方式。但是其人工成本较高,同一个项目,至少需要Android端、iOS端、Web端三个开发团队。
    在这里插入图片描述

    小程序

    在这里插入图片描述

    • 2019 年印象最深的是小程序的发展,以及各大主流 App 纷纷推出小程序平台。小程序发展至今,热度不断攀升,目前小程序平台越来越多,这也促使各种跨平台的小程序框架不断涌现。已有的框架在性能和兼容性方面也在持续优化(例如 taro 和 uni-app 都会在本次 GMTC 大会上有相关的分享),同时也出现了像 kbone 这样的新思路。结合小程序云的开发能力,越来越低的开发门槛将持续刺激小程序的发展。
    • 小程序就如我们现在看到的青藤工作室的小程序,需要完成小程序的开发少不了后端开发

    一套代码编到10个平台,这不是梦想。眼见为实,扫描10个二维码,亲自体验最全面的跨平台效果!
    在这里插入图片描述

    快应用

    快应用是华为、小米、OPPO、魅族等国内9大主流手机厂商共同制定的轻量级应用标准,目标直指微信小程序。
    在这里插入图片描述

    HTML

    HTML就等同于我们人体里面的骨架,一块一块骨头(标签)组装起来建立起一个人的骨架和结构。比如说经常可以见到的head,body,footer等标签,就等同于一个人的头,身体和脚。那其他的标签比如h1,h2,div,sectionul,li等标签就是用来组建我们人体每一个部位的小骨头

    前端骨架

    如果HTML加上了JavaScript(人体中的大脑和肌肉)就可以操控整个人的动作,让一个人活起来了。但是只有骨头和肌肉,这个也太难看了吧?想想都觉得吓人。所以我们会有皮肤来把这些不太好看的东西藏起来,这个时候就需要在HTML中使用CSS(人体的皮肤)。这样子我们有好的皮肤加上衣服和化妆品的打扮,这样才可以貌美如花嘛对吧?

    在这里插入图片描述

    一些我关注的开源项目

    midway-hooks

    midway-hooks最好用最潮的Serverless同构框架,没有之一。开源地址 https://github.com/midwayjs/hooks

    在这里插入图片描述
    在这里插入图片描述

    国内10大前端团队网站

    1.淘宝前端团队(FED)

    网址:https://fed.taobao.org/
    阿里巴巴淘宝前端团队网站,一群崇尚极客精神的人正在用技术为体验提供无限可能。在这里,可以涉及“无线”、“全栈”、“工程”、“安全”、“架构”等多方面的技术。

    2.FEX 百度前端研发部

    网址:http://fex.baidu.com/
    FEX 是百度「Web 前端研发部」的内部名称,其中 FE 是 Front End 的缩写,X 代表我们不仅关注前端技术,还更重视全端及全栈的能力。

    3. Alloy Team 腾讯Web前端团队

    网址:ttp://www.alloyteam.com/
    腾讯Web前端团队 – Alloy Team,源于2008年成立的腾讯WebQQ团队,致力于Web前端技术的研究,热衷HTML5、移动Web技术,用最酷的新技术开发各种有趣的开源项目。

    4.奇舞团

    网址:https://75team.com/

    360奇舞团(奇虎75Team)是 奇虎360公司Web平台部前端工程师 + 部分特约嘉宾 组成的一个前端团队。这里产出很多的开源项目和产品,如 ThinkJS 一款Node.js MVC框架,众成翻译—一款友好的翻译平台等。

    5.凹凸实验室

    网址:https://aotu.io/
    凹凸实验室(http://Aotu.io,英文简称O2) 始建于2015年10月,是一个年轻基情的技术团队。
    O2面向多终端技术体系,致力于构建沉淀与分享包括但不限于交互、页面制作技巧、前端开发、原生APP开发等方面的专业知识及案例。

    6.YMFE 去哪儿大前端技术中心

    网址: https://ymfe.org/
    去哪儿网大前端技术中心(YMFE)是由 FE,iOS 和 Android 工程师共同组成的,去哪儿最具想象力、创造力和影响力的大前端团队,致力于为业务开发提供一体化的移动开发解决方案,努力提升各个产品线在移动端的开发效率及使用体验。

    7.JDC 京东设计中心

    网址:http://jdc.jd.com/
    京东的用户体验设计团队,分享内容涵盖UR用户研究、ID交互设计、VD视觉设计、FD前端开发

    8.饿了么前端

    网址:https://fe.ele.me
    饿了么前端的网址重定向到了饿了么前端在知乎上的专栏 https://zhuanlan.zhihu.com/ElemeFE,他们在 github 上也开源了很多好东西。

    9.携程UED

    网址:http://ued.ctrip.com/
    携程UED团队在体现携程产品设计全局观的基础上建立细致的产品设计规范,通过用户研究,推动设计改进,以优化交互、视觉及产品体验。

    10.美团前端

    网址:https://tech.meituan.com/
    美团前端团队近年来快速发展,由原来的前端团队转变成涵盖Web、iOS和Android 而组成美团大前端。

    11. 蚂蚁体验科技

    网址: https://xcloud.alipay.com/
    蚂蚁体验科技,让用户体验美好,探索极致用户体验与最佳工程实践,国内前端领域不可忽视的力量。开源了Ant Design,AntV,语雀,云凤蝶等多个优秀项目。

    展开全文
  • 大前端是什么?

    万次阅读 多人点赞 2019-08-31 08:42:37
    大前端是什么? 简单来说,大前端就是所有前端的统称,比如Android、iOS、web、Watch等,最接近用户的那一层也就是UI层,然后将其统一起来,就是大前端大前端最大的特点在于一次开发,同时适用于所有平台,开发者...

    大前端是什么?

    简单来说,大前端就是所有前端的统称,比如Android、iOS、web、Watch等,最接近用户的那一层也就是UI层,然后将其统一起来,就是大前端。大前端最大的特点在于一次开发,同时适用于所有平台,开发者不用为一个APP需要做Android和iOS两种模式而担心。大前端是web统一的时代,利用web不仅能开发出网站,更可以开发手机端web应用和移动端应用程序。

    大前端为什么出现?

    由于node的出现,前端工程师不需要依赖于后端程序而直接运行,从而前后端分离起来。所以当开发一个新产品的时候服务只需要写一次,但是面向用户的产品可能有很多,例如网站、Android客户端、iOS客户端和微信小程序等。由于各个平台使用的技术栈都不一样,代码无法复用,非常浪费人力、物力。那么有没有什么技术能够解决这一痛点呢?大前端应运而生,其实大前端的主要核心就是跨平台技术,有了跨平台技术,各个平台的差异性就抹平了,开发者只需要一套技术栈就可以开发出适用于多个平台的客户端。

    跨平台方案简介

    目前的主流跨平台方案:Cordova/phoneGap、React Native、Weex、微信小程序、PWA和Flutter等,根据其原理性,可以分为三大类。

    H5+原生(Cordova、Ionic、微信小程序)
    JavaScript开发+原生渲染 (React Native、Weex、快应用)
    自绘UI+原生(Flutter)
    增强版Web App(PWA)
    接下来简单介绍这三种跨平台方案。

    H5+原生混合开发

    这种模式又称为Hybrid开发,现在很多App都用这种模式去开发,常见的有微信、淘宝、美团、爱奇艺等知名移动应用等。国内也有很多公司使用Hybrid模式去开发平台,供开发者使用,像Dcloud、AppCan、Inoic等,基本上都是参考Cordova衍生出的混合开发框架。

    这类框架主要原理就是将APP的一部分需要动态变动的内容通过H5来实现,通过原生的网页加载控件WebView (Android)或WKWebView(ios)来加载,H5部分是可以随时改变而不用发版,这样就解决了动态化的需求,同时,由于h5代码只需要一次开发,就能同时在Android和iOS两个平台运行,这也可以减小开发成本,我们称这种h5+原生的开发模式为混合开发。采用混合模式开发的APP我们称之为混合应用或Hybrid APP。

    由于原生开发可以访问平台所有功能,而混合开发中,h5代码是运行在WebView中,而WebView实质上就是一个浏览器内核,其JavaScript依然运行在一个权限受限的沙箱中,所以对于大多数系统能力都没有访问权限,如无法访问文件系统、不能使用蓝牙等。所以,对于H5不能实现的功能,都需要原生去做。而混合框架一般都会在原生代码中预先实现一些访问系统能力的API, 然后暴露给WebView以供JavaScript调用,这样一来,WebView就成为了JavaScript与原生API之间通信的桥梁,主要负责JavaScript与原生之间传递调用消息,而消息的传递必须遵守一个标准的协议,它规定了消息的格式与含义,我们把依赖于WebView的用于在JavaScript与原生之间通信并实现了某种消息传输协议的工具称之为WebView JavaScript Bridge, 简称 JsBridge,它也是混合开发框架的核心。

    混合应用的优点是动态内容是H5,使用web技术栈就可以开发,社区及资源丰富,缺点是性能不好,对于复杂用户界面或动画,webview不堪重任。

    JavaScript开发+原生渲染

    这类开源框架的代表主要是Facebook的React Native、阿里的Weex,当然也有未开源的美团的Picasso,以及最新推出的快应用。
    JavaScript开发+原生渲染的方式主要优点如下:

    采用Web开发技术栈,社区庞大、上手快、开发成本相对较低。
    原生渲染,性能相比H5提高很多。
    动态化较好,支持热更新。
    当然也有缺点如下:

    渲染时需要JavaScript和原生之间通信,在有些场景如拖动可能会因为通信频繁导致卡顿。
    JavaScript为脚本语言,执行时需要JIT,执行效率和AOT代码仍有差距。
    +由于渲染依赖原生控件,不同平台的控件需要单独维护,并且当系统更新时,社区控件可能会滞后;除此之外,其控件系统也会受到原生UI系统限制,例如,在Android中,手势冲突消歧规则是固定的,这在使用不同人写的控件嵌套时,手势冲突问题将会变得非常棘手。

    React Native

    React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,目前支持iOS和Android两个平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

    React Native的原理和React设计一致,React中虚拟DOM最终会映射为浏览器DOM树,而RN中虚拟DOM会通过 JavaScriptCore 映射为原生控件树。

    JavaScriptCore 是一个JavaScript解释器,它在React Native中主要有两个作用:

    为JavaScript提供运行环境。
    是JavaScript与原生应用之间通信的桥梁,作用和JsBridge一样,事实上,在iOS中,很多JsBridge的实现都是基于 JavaScriptCore 。
    而RN中将虚拟DOM映射为原生控件的过程中分两步:

    布局消息传递; 将虚拟DOM布局信息传递给原生
    原生根据布局信息通过对应的原生控件渲染控件树
    由于React Native是原生控件渲染,所以性能会比混合应用中H5好很多,同时React Native是Web开发技术栈,只需维护一份代码,即可在多个平台上使用。

    Weex

    Weex是阿里巴巴于2016年发布的跨平台移动端开发框架,思想及原理和React Native类似,最大的不同是语法层面,React Native使用React.js作为开发框架,而Weex则使用Vue.js作为开发框架。Vue和React堪称前端领域最火的JavaScript框架,它们的易用性和功能性都非常强大,Weex在淘宝上也有广泛的应用。

    快应用

    快应用是华为、小米、OPPO、魅族等国内9大主流手机厂商共同制定的轻量级应用标准,目标直指微信小程序。它也是采用JavaScript语言开发,原生控件渲染,与React Native和Weex相比主要有两点不同:

    快应用自身不支持Vue或React语法,其采用原生JavaScript开发,其开发框架和微信小程序很像,值得一提的是小程序目前已经可以使用Vue语法开发(mpvue),从原理上来讲,Vue的语法也可以移植到快应用上。
    React Native和Weex的渲染/排版引擎是集成到框架中的,每一个APP都需要打包一份,安装包体积较大;而快应用渲染/排版引擎是集成到ROM中的,应用中无需打包,安装包体积小,正因如此,快应用才能在保证性能的同时做到快速分发。

    自绘UI+原生

    通过在不同平台实现一个统一接口的渲染引擎来绘制UI,而不依赖系统原生控件,所以可以做到不同平台UI的一致性。注意,自绘引擎解决的是UI的跨平台问题,如果涉及其它系统能力调用,依然要涉及原生开发。这种平台技术的优点如下:

    性能高;由于自绘引擎是直接调用系统API来绘制UI,所以性能和原生控件接近。
    灵活、组件库易维护、UI外观保真度和一致性高;由于UI渲染不依赖原生控件,也就不需要根据不同平台的控件单独维护一套组件库,所以代码容易维护。由于组件库是同一套代码、同一个渲染引擎,所以在不同平台,组件显示外观可以做到高保真和高一致性;另外,由于不依赖原生控件,也就不会受原生布局系统的限制,这样布局系统会非常灵活。
    不足之处:

    动态性不足;为了保证UI绘制性能,自绘UI系统一般都会采用AOT模式编译其发布包,所以应用发布后,不能像Hybrid和RN那些使用JavaScript(JIT)作为开发语言的框架那样动态下发代码。

    Flutter

    Flutter 是 Google推出并开源的移动应用开发框架,主打跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App,一套代码同时运行在 iOS 和 Android平台。 Flutter提供了丰富的组件、接口,开发者可以很快地为 Flutter添加原生扩展。

    Flutter既不使用WebView,也不使用操作系统的原生控件。 相反,Flutter使用自己的高性能渲染引擎来绘制widget。这样不仅可以保证在Android和iOS上UI的一致性,而且也可以避免对原生控件依赖而带来的限制及高昂的维护成本。

    Flutter使用Skia作为其2D渲染引擎,Skia是Google的一个2D图形处理函数库,包含字型、坐标转换,以及点阵图都有高效能且简洁的表现,Skia是跨平台的,并提供了非常友好的API,目前Google Chrome浏览器和Android均采用Skia作为其绘图引擎,值得一提的是,由于Android系统已经内置了Skia,所以Flutter在打包APK(Android应用安装包)时,不需要再将Skia打入APK中,但iOS系统并未内置Skia,所以构建iPA时,也必须将Skia一起打包,这也是为什么Flutter APP的Android安装包比iOS安装包小的主要原因。

    但是Flutter也有不足之处,不支持动态下发代码和热更新。

    PWA(Progress Web App)

    PWA不属于上述跨平台开发的某一种,它是一种理念,PWA 本质上是 Web App,借助一些新技术也具备了 Native App 的一些特性,比如离线能力、本地缓存、和通知推送,兼具 Web App 和 Native App 的优点,看起来更像一个原生App。PWA完全使用前端技术栈,不过它需要手机和浏览器的支持,目前支持ServiceWorker和Google Play Service的Android手机,以及搭载11.3以上的iOS手机可以使用PWA。由于国内手机厂商和浏览器厂商的统一性问题,PWA在国内发展不是很好,但是在国外并没有这些问题。

    大前端趋势

    大前端不仅会成为移动开发与Web前端的发展趋势,也将会是未来的显示设备终端的开发技术趋势。大前端将做更多的终端开发、工程化等工作,而不仅仅只是开发Web页面。大前端工程师将能搞定所有端上的开发。与充满争议的全栈工程师相比,它更具可操作性。但同时对开发者而言,要会更多的技术栈,比如原生开发者要学习html、css、js等前端知识,前端开发人员也要学习Android或iOS的原生开发技术,然后了解一下常见的跨平台技术,只有这样才能更好的融入到大前端的这个大家庭中。


    作者:前端启航
    链接:http://www.imooc.com/article/283259?block_id=tuijian_wz
    来源:慕课网

    展开全文
  • ‍‍大家好,我是校长。最近,字节跳动技术团队公布了一份关于 2022 年前端技术的发展趋势预测,总结了新的一年前端技术可能产生的6个变化,让我们一起来借鉴参考一下吧。01前端新标准2014...

    ‍大家好,我是校长。

    最近,字节跳动技术团队公布了一份关于 2022 年前端技术的发展趋势预测,总结了新的一年前端技术可能产生的6个变化,让我们一起来借鉴参考一下吧。

    01

    前端新标准

    2014 年 10 月 28 日,W3C 正式发布 HTML5.0 推荐标准让前端技术蓬勃发展。虽然 HTML6.0 目前处于提案阶段,但是社区已经开始有了一些零星的讨论,所以可能它离我们并不太远。2022 年,可能 HTML6 并不会推出,但是可能会有更多利于用户体验的提案出现。

    Facebook 改名 Meta 后,元宇宙话题很火热,但突然一夜之间,讨论似乎又从元宇宙过渡到了 Web3.0。

    Web1.0到2.0的转变,极大地改变了前端技术,Web3.0时代,可能是去中心化,可能是物联网,可能是人工智能,值得每个前端开发去关注。

    02

    框架、工程与体验 

    前端框架

    在 StackOverflow 的“最受欢迎的 Web 框架”调查中,除去 SSR 渲染框架和 jQuery,上榜的前端框架共有 5 个:

    69cc24d746c9cb72abaf706754cd1cc1.png

    React,Vue,Angular 依然是强势铁三角向前发展。在 2022 年 Vue3 会成为 Vue 的默认版本,React 18 也会发布正式版本,从目前社区关注度来看, Vue3 源码 Github star 27k+, React 18 WG Github star 3.9k+,且在 npm 的下载量上,新版本下载数目都比较可观,所以很有可能今年尝试和使用的人会变得更多。

    打包器

    打包器大概可以分为传统编译和ESM 混合编译,而由于 ESM 混合编译类打包器依赖于其他打包器,所以理论上 NPM 下载量永远不可能超过其依赖。同时 ESM 混合编译今年整体表现平平。

    UI 框架

    由于模块化 CSS、摇树、MVVM 的流行,UI 框架的选择其实没有那么举足轻重了,针对自己选用的框架选择一个符合项目风格的 UI 即可。预计今年也不会有黑马闯入和变动。

    03

    智能搭建恰逢其时

    低代码的崛起

    2021 年开年以来,低代码行业被不断关注,也引发了众多企业的热议与调研。

    低代码发展初期,厂商的类型多样化,传统软件厂商、互联网大厂均涉及低代码领域,通用型厂商相对垂直型厂商应用场景更加广泛,因此厂商数量更多。但随着市场成熟,通用类型厂商竞争加剧,垂直型厂商在细分的领域将会呈现优势明显趋势,可以进一步挖掘用户场景,提升产品能力和用户满意度。及早布局低代码产业生态,多维度拓展厂商优势,才能在未来占据高地。

    AI 与图形化的探索

    人工智能作为跨时代技术在各个领域大放异彩,近些年 AI 能力在前端领域的尝试与应用带来新一轮的技术革命。

    阿里的 imgcook 可以通过识别设计稿(Sketch / PSD /图片)智能生成 React、Vue、Flutter、小程序等不同种类的代码,并在同年双 11 大促中自动生成了 79.34% 的前端代码,智能生成代码不再只是一个线下实验产品,而是真正产生了价值。

    9d50b0ac1be5e7ffea84ac2a4ff166af.png

    2022 年随着低代码和图形化技术的逐步完善,二者会相互完善和成就彼此。使用者通过 AI 实现页面的还原然后再通过低代码平台对页面进行调整,整个过程基本上不写什么代码就可以完成整个页面的搭建,搭建页面真的会变得特别简单。

    04

    跨平台技术撬开多「端」世界的大门

    随着从 PC 时代向移动互联网时代演进,原生客户端因为自身天花板的原因也在逐渐向跨平台方案倾斜,当然这得益于跨平台方案的明显优势。对于开发者而言,可以做到一次开发多端复用,这在很大程度上能够降低研发成本,提高产品效能。但是,移动端的跨平台技术并不是仅仅考虑一套代码能够运行在不同场景即可,还需要解决性能、动态性、研发效率以及一致性的问题。

    React Native VS Flutter

    React Native 是以 Web 技术开发原生应用的典型框架。但是与众多基于 html 的跨平台框架相比,Flutter 绝对是体验最好,性能与构建思路几乎最接近原生开发的框架。

     Flutter 目前虽然有着跨端最好的性能和体验但是关注人数和 React Native 不相上下。React Native 由于先出优势加上 React 的影响力导致目前很多 APP 都已经进入存量阶段,少有新的 APP 出现,所以在没有足够的收益情况下,大部分 APP 是不会进行技术变更的。所以在 2022 年,如果两者都无重大的技术变更,除了对 Flutter 关注的人会逐渐变多,两者大概不会有什么比较大的转变。

    小程序

    目前主流小程序平台有 10 多家,包括腾讯的微信小程序、QQ 小程序;阿里的支付宝小程序、淘宝轻店铺;字节跳动的头条小程序、抖音小程序;百度小程序等;不同平台的实现标准各不相同,开发者需要学习不同平台的开发规范做定制化开发。

    3bd55cab87f1fb03393c57cf3050a46b.png

    所以在 2019 年 9 月 12 日阿里巴巴主导发起并联合 W3C 中国及国内外厂商起草了 MiniApp 标准化白皮书(MiniApp Standardization White Paper),旨在制定共同标准减少平台差异,并成立了相关工作组。

    截至目前产出了 lifecycle,manifest,packaging 等几篇文档,但从目前来看各平台对这些标准的实现度还很低,并未实现统一,所以这么来看标准化的路看着还很长。

    在当下要解决跨平台开发问题可以采用框架转换。

    随着一些跨端框架(Uniapp、Taro)的出现部分跨端转换器基本已不再维护,这边仅作补充。我们接下来了解一些跨端转换器相关的内容:

    • wept: 微信小程序实时运行工具,目前支持 Web、iOS 两端的运行环境;

    • hera-cli: 用小程序方式来写跨平台应用的开发框架,可以打包成 Android 、 iOS 应用,以及 H5;

    • weweb-cli: 兼容小程序语法的前端框架,可以用小程序的写法,来写 web 应用

    跨端这项技术并非为了完全替代原生开发,针对每个场景我们都可以用原生写出性能最佳的代码。但是这样做工作量太大,实际项目开发中需要掌握效率与优化之间的平衡,跨端的使用场景并不一定是项目级别的,可以是业务级甚至是页面级的。

    跨端的优势在于能让我们在书写更有效率的代码、拥有更丰富的生态的同时,还带来了不错的性能。

    05

    泛前端

    “前端开发”的发展历史像是一直在找寻自己的定位;从切图仔、写 HTML 模板的“石器时代”,到前后端分离、大前端的“工业时代”,再到现在跨端技术、低代码的“电气时代”。前端研发的职责一直在改变,同时前端研发需要掌握的技术也在迭代更新。

    Serverless

    从语义上来理解, serverless 即无服务架构,但是无服务器的说法仅仅是一种概念上的强调,无服务架构仍然在某处存在有服务器,只是开发者无需再像传统开发一样去关注这些基础设施,而是将精力更聚焦在业务实际的逻辑代码之上。

    对比传统的服务器托管方式,使用 serverless 架构开发,开发者无需多关注可用性、扩缩容、监控告警以及安全漏洞等等问题,只需要负责 Faas 层的代码来处理业务逻辑即可。

    全栈

    “全栈开发者”是指“同时掌握前端、后端以及其他网站开发相关技能的开发者”。全栈开发者能够胜任产品开发的全流程,从前端到后端,从架构设计到代码落地,从自动化测试到运维等。对于公司来说,全栈工程师可以减小公司的用人成本,减少项目沟通成本;对于个人来说,拥有全链路技术有益于技术的闭环,扩展全局思维,提升个人能力和价值。

    0f43cb0e3614bdfaf575bf70fa2d6157.png

    DevOps

    DevOps(Development 和 Operations 的组合词)是一种重视“软件开发人员(Dev)”和“IT 运维技术人员(OPS)”之间沟通合作的文化、运动或惯例。透过自动化“软件交付”和“架构变更”的流程,来使得构建、测试、发布软件能够更加地快捷、频繁和可靠。可以把 DevOps 理解为一个过程、方法与系统的总称。

    06

    5G场景下的新趋势

    5G 的到来对于技术研发工作者的我们而言意味深远。它的出现是数据传输速度、响应速度和连接性的一次巨大飞跃。

    5G 将与超高清视频、VR、AR、消费级云计算、智能家居、智慧城市、车联网、物联网、智能制造等产生深度融合,这些都将为前端技术的发展带来新的增长和机遇。

    WebAR & WebVR

    元宇宙概念火爆全球,目前的 WebAR 和 WebVR 技术距离实现元宇宙的愿景似乎还很遥远,但借助于以 URL 的格式进行传播的优势,通过社交媒体分享形式进行推广,WebAR 和 WebVR 无疑是用户接触到元宇宙门槛的最便捷的方式,不需要购买昂贵的 VR 设备,不需要安装 APP,通过手机网页就可以进行体验。在 5G 技术逐渐普及的当今,现有的一些体验问题,例如:3D 模型体积较大,初次资源加载耗时长之类的问题也能够得到一些缓解。

    948f8dbbe4d516af37fa0feb6f3ed4bf.png

    前端人在这块能够做些什么?从技术上来讲,需要我们通过机器学习算法,实时地将虚拟图像覆盖到用户屏幕,并且和真实世界中的位置进行对齐,结合 WebRTC 技术实现网页浏览器实时获取和展示视频流,再利用 WebGL 的能力,进行 3D 人物模型加载,渲染和播放动画。

    Web 3D

    随着 5G 技术发展,视频加载速度会非常快,简单的实时渲染会被视频直接替代。复杂的可以通过服务器渲染,将画面传回网页中,只要传输够快,手机的性能就不再是问题。

    降低 web 3D 研发成本应该是将来的一个重要发展路线,随着技术门槛的降低,会吸引更多感兴趣的人加入促使其正向发展。所以 Web 3D 可能会朝着平台化的方向发展,能提供简单高效的工具将成为核心竞争力。

    WebRTC ( Web Real-Time Communications )

    WebRTC 是一项实时通讯技术,它为前端打开了信息传递的新世界大门,对于绝大多数前端开发者来说,对于信息的传递还局限于 XMLHttpRequest,升级到全双工大家会用到 WebSocket ,对于能力闭塞的前端来说,WebRTC 无疑是打破了前端“楚门的世界”。

    点击下方公众号卡片,关注我

    在公众号对话框,回复关键字 “1024”

    免费领取副业赚钱实操教程

    展开全文
  • 不想成为全栈的前端不是好程序员。 数年以前,全栈工程师的理念忽然风靡墙内外,成为开发者们津津乐道的话题。数年过去,关于全栈工程师... 诚然,有了Node,再加上JavaScript杀四方,前端转型全栈的确是非常...
  • 随着移动互联网的发展,前端开发领域也越来越广,前端早已经告别了切图的时代,迎来了规模化,工程化的大前端时代。但很多新手对于大前端还不是特别了解,如果你是零基础,想学习前端开发,那么,就有必要好好看看这...
  • 2021大前端技术储备

    千次阅读 2020-12-30 10:38:46
    GMTC全球大前端技术大会是由极客邦科技旗下InfoQ中国主办的技术盛会,关注前端、移动、AI应用等多个技术领域,促进全球技术交流,推动国内技术升级。GMTC为期4天,包括两天的会议和两天的培训课,主要面向各行业前端...
  • 大前端和前端的区别是什么?

    千次阅读 2021-05-25 11:06:39
    现在的前端可以分为大前端和前端两种,学习的课程也是不一样的,那么你知道两者的区别在哪里吗?都是用来做什么的?下面小千就来给大家介绍一下。 大前端和前端的区别 首先前端通常指的都是web前端,web前端的工作...
  • 你有没有听说过大前端时代?你了解大前端吗?大前端的发展趋势如何?近些年来互联网越来越多元化的发展。从原来的PC页面前端到移动互联网wap网站以及APP,再到现在的微信小程序、快应用等等。前端工程师的工作内容...
  • 到底大前端是什么?一般大前端技术有哪些?Web前端是随着移动互联网的发展以及用户体验度的提升而诞生的新职业,入门简单、市场广阔,吸引了很多人入行。然而,近几年,大前端出现在人们面前,有人好奇什么是大前端...
  • 所谓的全栈和大前端有什么区别? 大前端大前端都快被说烂了,然而还是有很多人不理解它具体是什么 那么,大前端的边界到底在哪里? 端上的开发,Web、移动端、PC 端,这些平台上的开发现在大家基本都认同是...
  • 大前端开发:前端如何开发 APP

    万次阅读 多人点赞 2018-07-03 02:45:52
    做为一个前端开发人员,有时候除去传统的前端开发还需要进行其他开发,比如公众号开发,小程序开发,APP 开发。 本场 Chat 将带你从0开始,基于 APICloud 进行 APP 开发,你只需要会前端就可以。 本场 Chat 主要内容...
  • 网易9大前端项目就业实训营

    千次阅读 2022-04-03 12:23:13
    已报名该前端课,需要底下评论。 在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式: width和height:内容的宽度、高度(不是盒子的宽度、高度)。 padding:内边距。 border:边框。 margin:外边距...
  • 大前端技术现在太火了!

    万次阅读 2019-11-05 09:00:00
    也许很多人觉得大前端这个概念很新,但实际上这个概念已经出现好几年了。在2017年,当时以饿了么为代表的一些企业开始提出大前端的概念。在2018年年中,InfoQ举办了首届全球大前端技术大会(GMTC),在大会中将前后...
  • 大前端学习路线
  • 详解大型前端项目知识点

    千次阅读 2021-01-12 08:36:49
    前端基础架构 项目管理 代码管理 版本管理 CI/CD 缺陷管理 外包管理 开发环境 预发布环境 测试环境 本地开发环境 公有云、私有云环境 规范 代码风格 性能,可用性,可访问...
  • 大小前端区别

    千次阅读 2018-05-31 09:13:47
    大前端包括一切负责展示的端,包括 Web 前端、PC、移动和 VR大前端负责从浏览器端到web服务器端的所有开发,从后台工程师那边调用数据api。包含客户端业务逻辑(浏览器上的html,css,javascript),服务器端业务...
  • 2019 大前端是什么,我们该学什么?

    千次阅读 2019-07-13 14:58:27
    什么是大前端大前端是当下技术市场进化出的的一种新的自然选择物种。“单腿”的初、中级客户端工程师,已越来越不适应移动互联网对当下技术的高标准诉求了(特别牛逼的客户端技术专家除外)。 包含了android iOS ...
  • 2019 年web大前端技术趋势分析

    万次阅读 2019-08-29 22:53:57
    2019 年对于大前端技术领域而言变化不算太大,目前三大技术框架日趋成熟,短期内不大可能出现颠覆性的前端框架 (内心 OS:出了也学不动了)。 本文结合个人和团队经历对 2019 上半年做个技术总结,将各类技术框架 / ...
  • 2017年,以饿了么为代表的一些企业开始提出大前端的概念。2018年,InfoQ 举办了首届全球大前端技术大会,在大会中将前后端分离、跨平台和 PWA 等技术设立了专场,这次大会具有重要的意义,它预示了大前端时代的到来...
  • 1、什么是大前端? 传统上,Web应用可分为前端(在浏览器中执行的部分)和后端(在服务器中执行的部分)。 前端工程师的职责是以Web技术(HTML、CSS、JavaScript、DOM、Ajax等)实现基于浏览器的用户界面。以相衔接...
  • 大前端完整学习路线(完整版)

    万次阅读 多人点赞 2019-03-19 11:35:15
    面向对象三特征: 继承性、多态性、封装性、接口。 设计模式: 面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程。 第五阶段:...
  • 大前端介绍与直播原理

    千次阅读 2018-11-08 01:32:21
    大前端 1.大前端需要掌握的技能 前端基本技能 Vue React Angular Webpack ES6 服务类 Node.js express.js koa.js egg.js 3D数据图像(用于游戏) three.js 二维图像 d3.js raphael.js echart.js ...
  • 认识大前端,开启无限可能

    万次阅读 多人点赞 2020-11-05 10:41:41
    一、了解大前端知识体系,有全局的认知 1.1 工程师的技能树 在大前端知识体系中,每个阶段的工程师,需要有不同的知识技能储备。江湖封号程序猿(媛),业内一般称呼软件开发工程师。 1.1.1 初级工程师 初级前端...
  • 大前端完整学习路线(详解)

    万次阅读 多人点赞 2016-09-20 16:19:20
    大前端完整学习路线(详解) 第一阶段: HTML+CSS: HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础: Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM...
  • 大前端知识体系整理(二)——各阶段知识点列举 前言 本文为笔者回顾前端开发历程的一份总结和梳理,是对自己走过的路进行的复盘。想要总结出一些普适的规律,一是用来自己反思和规划未来,二是为后来人做一些...
  • 场景A:笔者在工作中经常遇到,app端开发人员安卓和IOS,一口一个我就是移动端大前端? 场景B:笔者在工作中也经常遇到,web前端,H5前端,一口一个我就是全栈前端? 场景C: 笔者在工作中还经常遇到,PHP前端,...
  • 然而,近几年,大前端出现在人们面前,有人好奇什么是大前端,为什么越来越多的企业想要大前端人才?学大前端靠谱不靠谱吗?且看我的分析。 什么是大前端? 简单来说,大前端就是移动端和前端的统称,比如Android、...
  • 大前端干货资料

    万次阅读 2020-05-26 17:25:01
    经典模块化前端框架,由职业前端倾情打造,面向全层次的前后端开发者,低门槛开箱即用的前端 UI 解决方案 后台前端解决方案 AdminLTE 基于Bootstrap vue-element-admin 基于ElementUI DashboardPack 种

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,088,968
精华内容 435,587
关键字:

大前端