前端技术猜想-2018

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/greenqingqingws/article/details/79096771

前言

前端技术种类繁多,在平时工作中根据业务的不同,每个人用到的前端技术也不太一样~我们还是需要对目前流行的技术做一个了解,以备不时之需。本文是对3篇大神在文章的汇总和整理~只是资料的搬运工~感兴趣的童鞋,请自行点击原文链接~

参考资料

前端领域

前端在飞速发展的过程中,领域不断细化,在此借用一下蚂蚁金服兄弟的栗子。例如阿里内部的前端就已经有中后台、图形、端技术、泛Node、开发者服务5个大方向了,每个大方向也会细分,举一些例子:

中后台(包括人工智能和大数据)

有云控制台、信息&资产管理平台、内部研发&项目管理平台、人工智能&机器学习平台、数据研发分析平台,企业内部信息平台等。具体产品如阿里云控制台、ERP、PAI、DeepInsight、阿里内外、Basecamp等。

图形

有基础图形库、3D图形、数据可视化、流程图等。具体产品如G2、DataV、阿里云城市大脑、滴滴智能交通调度图、双十一大屏等。

端技术

有移动端(iOS、Android、MobileWeb、PWA、小程序)、PC端(客户端、Web端)、触屏电脑、各种监控大屏、智能手表手环,智能汽车&家居屏幕等。具体产品如淘宝支付宝的App、PC主站、移动H5站,阿里郎、VS Code、双十一大屏、UC浏览器UWP版本、各种智能手表、手环、汽车、家居屏幕等。

泛Node

有工具链、Web框架、IoT、客户端(Electron、NW)等。具体产品如DEF/Atool/F2E-Test(阿里前端开发者工具)、Egg.js、阿里云的IoT应用、VS Code等。

开发者服务

有应用开发运维平台、组件市场等。具体产品如阿里云的应用搭建平台Boat、Fusion-Design组件市场,支付宝小程序开发者工具等。

大前端

PWA-Google

PWA(Progressive Web Apps,渐进式网页应用),让网页使用如同App般的体验的一系列方案。PWA就是一个网页, 可以通过前沿的技术开发出一个网页应用。
- PWA中文版
- 饿了么的PWA升级实践

Flow & TypeScript

  • TypeScript, Microsoft开发的JavaScript的超集,在JavaScript上做了一层封装,最终代码可以编译为JavaScript。TypeScript的核心就是静态数据类型。
    这里写图片描述
  • flow, 是一个JavaScript静态类型检测器。使用类型接口查找错误,甚至不需要任何类型声明,能立刻检测代码变化,在开发JS时提供快速不断的反馈。
    • flow
    • 两者比较
      1. TypeScript的生态圈明显在Flow之上,各大主流类库都提供了TypeScript的类型声明文件,可配合VS Code。
      2. Flow是侵入JavaScript的,对JavaScript做了一层增强;而TypeScript是JavaScript超集,在JavaScript之上进行的语言抽象,最终编译成JavaScript。

Parcel

Parcel,一个快速、零配置的Web应用程序打包工具。两大特点:性能好、零配置。
- parcel
- 宣布Parcel:一个快速,零配置的Web应用打包工具
这里写图片描述

WebAssembly

WebAssembly 是一种新的字节码格式,缩写是:.wasm,是一种新的底层安全的二进制语法。
- 定义:精简、加载时间端的格式和执行模式。
- 可以将C/C++编译成WebAssembly二进制文件。
这里写图片描述
- 来谈谈WebAssembly是个啥?为何说它会影响每一个Web开发者?
- WebAssembly实践:如何写代码

React & Angular & Vue

三驾马车,大家都很熟悉了~此处省略一万字~
这里写图片描述
虽然17年爆发了React用户协议事件,引发了一度弃用React,改用Vue重构项目代码的风波~
作为前端,三驾马车是需要大家持续关注的焦点~

Next+React+Now

React的一大优点:丰富的插件。其中两个比较特别的插件:Next.js、Now.js。
- Next.js -> React的保险。能够在服务器上进行初始渲染,也可以在客户端继续进行渲染。
- Next Github
- 最简单的服务端渲染框架-Next.js快速入门
- Now.js,超级快速部署React应用的方式。
- Now 官网

yarn & npm

yarn和npm,也是大家比较熟悉的了~
yarn的优势:快!!!
- Yarn vs npm:你需要知道的一切

flex & grid

HTML页面的布局:tables、floats、flex、css grid,各有千秋,根据具体的场景将它们搭配适用,而不是相互替代。
- CSS Grid VS Flexbox
- 大漠关于布局的一系列文章值得一看

rxjs

官方说法:RxJS 是使用 Observables 的响应式编程的库,它使编写异步或基于回调的代码更容易。这个项目是 Reactive-Extensions/RxJS(RxJS 4) 的重写,具有更好的性能、更好的模块性、更好的可调试调用堆栈,同时保持大部分向后兼容,只有一些破坏性的变更(breaking changes)是为了减少外层的 API 。
- 通俗的方式理解Rx.js

微信小程序 & 支付宝小程序

小程序应该是无人不知无人不晓了,就不赘述了~

React Native & Electron

一些用Electron开发的知名app包括:Slack、Atom、Github Desktop以及Discord。
用React Native开发的流行应用包括:Facebook、Instagram、Airbnb以及UberEATS。

WebVR & WebAR

这里写图片描述

Reason&Babel

  • Reason(Facebook)语言
    Facebook现在用Reason来开发web版的Facebook Messenger以及其他项目(Whatsapp、Instagram、Ads等)。
    2017年,他们还推出了reason-react,将reason跟Reacy绑定在一起,这样你就可以写出可编译成惯用ReactJS的 Reason代码。

  • Babel
    关注一下Babel7。

GraphQL

GraphQL 是一种 API 查询语言, 用于服务器端执行按已定义类型系统的查询. GraphQL 不与任何特定的数据库或存储引擎进行绑定, 而是由您的代码和数据支持.(可以看成是REST的现代版)。
- GraphQL 官网
- GraphQL 官网 中文版

像Yelp、Spotify、Github、沃尔玛、《纽约时报》等主流公司都在采用GraphQL,而且现在还有了基于GraphQL的API。

Storybook

Storybook是一个定义、开发和测试UI组件的环境

Prettier

Prettier是一个代码格式化程序,可以让你的代码可读性更强,并且很好看。有18000+star,它还被用到了许多其他你热爱的项目上,比如Webpack、React、Next.js、Babel等。
- Prettier Github

Jest和Enzyme

Jest和Enzyme 是 JavaScript库,用于JS测试。
Jest和Snapshots + Enzyme超级简单的React组件测试API形成了一个很强的测试组合,会在2018年不断流行起来。

Gatsby

React的静态网站生成器。React网站本身就是用Gatsby开发的,Gatsby的全部关切都在于性能和给React提供尽可能快的web体验。

Immutable.js-Facebook

确保了状态不会因为使用不可变对象而发生突变。
非常适合大型开发团队。
在GitHub上拿到了20000多颗星的Immutable.js已经在2017年崛起。

Popmotion

是一个在GitHub上迅速赢得星星的JavaScript动画库。
特点:体验好,创新多。

HTML5.2

  • 原生的 < dialog > 元素

  • 在 iFrame 中使用 Payment Request API(支付请求 API)

  • 苹果的图标尺寸
    在 HTML 5.2 之前,sizes 属性仅能用于 rel 为 icon 的 link 元素中。然而,苹果的 iOS 设备不支持 sizes 属性。为了解决这个问题,苹果自己引入了一个他们设备专用的 rel appple-touch-icon 用于定义他们设备上使用的图标。
    在 HTML 5.2 中,规范定义了 sizes 属性不再仅仅可用于 rel 为 icon 的元素,也能用于 rel 为 apple-touch-icon 的元素。这样可以让我们为不同的苹果设备提供不同尺寸的图标。

  • 多个 < main > 元素
    使用 HTML 5.2,我们只要保证同一时刻只有一个 < main > 元素可见,就能在我们的标签中使用多个 < main > 元素。与此同时其它的 < main > 元素必须使用 hidden 属性进行隐藏。
  • 在 < body > 中写样式
    在 HTML 5.2 中,可以在 HTML 文档 < body > 内的任何地方定义内联< style > 样式块。这意味着样式定义可以离它们被使用的地方更近。
  • < legend > 中的标题元素
    在表单中,< legend > 元素表示 < fieldset > 表单域中的标题。在 HTML 5.2 前,legend 元素的内容必须为纯文本。而现在,它可以包含标题元素(< h1 >等)了。
  • 在 < p > 中不再能包含行内、浮动、块类型的子元素
    在 HTML 5.2 中,

    元素中唯一合法的子元素只能是文字内容。这也意味着以下类型的元素不再能嵌套于段落标签 < p > 内:

    • 行内块(Inline blocks)
    • 行内表格(Inline tables)
    • 浮动块与固定位置块
  • 不再支持严格文档类型(Strict Doctypes)
    DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd
    DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

没有更多推荐了,返回首页