大前端介绍

前端介绍

前端

简单来说，大前端就是所有前端的统称，比如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，section和ul，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，语雀，云凤蝶等多个优秀项目。