前端技术猜想-2018

最新推荐文章于 2024-06-13 10:03:52 发布
最新推荐文章于 2024-06-13 10:03:52 发布
阅读量974 收藏
点赞数
分类专栏： web前端 JavaScript 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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”

青青木屋
关注
专栏目录
前端Reract面试题-------总结（经典）
LVHA529的博客
01-04 636
1.React中keys的作用是什么？ Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。 render () { return ( ‹ul› { this.state.list.map(({item, key}) =› { return ‹li key={key}›{item}‹/li› }) } ‹/ul› ) } 在开发过程中，我们需要保证某个元素的 key 在其同级元...
web技术分析| 一篇前端图像处理秘籍
anyRTC的博客
08-24 802
在短视频和直播带货霸占了流量铁王座的当下，产品之间的竞争十分激烈，在抖音短视频问世以来，随其后效仿的产品也不计其数。产品要想脱引而出，仅靠画质和流畅度是很难取胜的，不仅要节省流量开支同时还要保证画质的超高清，与其同时还要有丰富的、标新立异的玩法来吸引用户。 随着 AI 技术的成熟，场景也变得丰富、多样了起来，比如：修复老电影、换脸特效、2K 升 4k、体育赛事 、特效 app。 但是无论产品需求怎么变，最终还是得在图像处理上下功夫，那么今天我们就从简单的图片处理入门，由浅入深的去探索视频处理，接触更多的音视
2018最新前端所有技术知识图谱
07-21
DOM对象.jpg html.jpg javascriptDOM基本操作.gif javascript函数基础.gif javascript变量.gif javascript字符串函数.gif javascript数据类型.gif javascript数组.gif javascript正则表达式.gif javascript流程语句.gif javascript运算符.gif jquery知识结构图.jpg window对象.gif 知识点查漏补缺必看，职业知识体系一目了然 客户端知识体系.jpg 浏览器对象.jpg 游戏前端.jpg
前端跨域原理的一些猜想
biaov
06-08 215
什么是跨域？ 每一个web服务都是一个区域，当两个web服务之间相互通讯时，所以产生了跨域。 为什么会存在跨域？ 这是由于浏览器的同源策略的限制。同源策略规定了如果不是同源的服务，相互之间通讯是不允许的，因为这样可能存在安全问题。 同源策略： 同协议、同域名、同端口 如何处理跨域 如果不是相互通讯的话即可以不受同源策略的影响。 例如：script标签和iframe标签 都是属于引用外部资源，不存在跨域问题。 跨域方法 JSONP 通过script标签引用接口出传递回调函数，通过回调函数
前端三驾马车
weixin_46221246的博客
02-29 788
学习总结1 前端初识 HTML是超文本标记语言（Hypertext Markup Language）的简称，用于定义内容结构。HTML具有多个版本，目前我们用的是HTML5。 W3C：万维网联盟（技术标准机构）。 CSS：层叠样式表（Cascading Style Sheets）简称，用于定义外观的表述性语言。 JavaScript： 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言...
探索高效能的Discord机器人开发：DiscordCoreAPI深度解析
最新发布
gitblog_00056的博客
06-13 396
探索高效能的Discord机器人开发：DiscordCoreAPI深度解析 DiscordCoreAPIA bot library for Discord, written in C++, and featuring explicit multithreading through the usage of custom, asynchronous C++ CoRoutines.项目地址:http...
前端学习小笔记
weixin_44950875的博客
11-05 217
前端学习小笔记
GuessTheNumber-sample:猜想在数字奥尔良项目中实现的数字游戏与Web API前端
05-09
在这个项目中，前端可能会利用AJAX技术与Web API进行异步通信，发送用户的猜测并接收服务器的响应，更新页面显示，从而实现动态的用户界面。JavaScript的jQuery库或者现代的Fetch API可以简化与后台的交互过程，提供...
浅谈微信小程序前端生态
03-29
微信小程序去年刚推出内测，就刷屏了笔者朋友圈好几天，而后来几个月单从技术生态来看，并不像人们预期那般火热。不过最近刚推出的web-view组件，算是再次引发了一波小高潮。 web-view组件中运行纯web应用 “ web-...
怎么调试前端代码？
weixin_59519449的博客
04-09 2795
前言：调试技巧，在任何一项技术研发中都可谓是必不可少的技能。掌握各种调试技巧，必定能在工作中起到事半功倍的效果。譬如，快速定位问题、降低故障概率、帮助分析逻辑错误等等。而在互联网前端开发越来越重要的今天，如何在前端开发中降低开发成本，提升工作效率，掌握前端开发调试技巧尤为重要。 目录 1、骨灰级调试大师Alert 2、新一代调试王者Console 3、JS断点调试 4、DOM断点调试 5、XHR Breakpoints 6、Event Listener Breakpoints 本文将一一
2018前端值得关注的技术
weixin_33958366的博客
01-08 588
1.前言 2017悄然过去，2018已经来到。人在进步，技术在发展。2018年前端有哪些领域，技术值得关注，哪些技术会兴起，哪些技术会没落。下面就我个人的判断进行一个预测判断，希望能对大家起到一个参考作用！下面提及的技术，只是建议大家关注，也不是建议大家全部的都要学，而是建议大家按需学，自己觉得哪些需要学，对哪些有兴趣就学哪些！如果大家有...
前端三驾马车现状如何？2018 JavaScript 现状调查报告火热出炉！
weixin_34342992的博客
11-23 175
StateOfJS 刚刚发布了 2018年的 JavaScript 现状调查报告，今年他们调查了超过 20000 名 JavaScript 开发者，以确定他们正在使用什么，他们对什么感到满意以及他们想要学习什么。1、JavaScript 现状 —— “方言”随着 JavaScript 的成熟，开发者基于 JavaScript 创建了许多其他语言，或者叫“方言”，如 ES6、TypeScript、F...
2018年最热门的5个前端技术
List_dong 前端技术共享平台
08-13 2971
在很多人曾经的记忆里，前端人员就是做个美工、做些所谓的网页特效之类，在IT公司当中是比较没有话语权的一群人。不过，近年来，确切地说是Node及NPM出现之后，前端技术得到快速发展，各种技术框架层出不穷，前端人员不仅翻身做主人，而且成为了很多程序开发的中坚力量。那么，展望2018年，又有哪些前端技术值得我们关注呢？ React、Angular、Vue 这几个时下最热门的前端框架，2018年有望继...
HTML、CSS、和JavaScript
艾利克斯的个人博客
08-15 459
html 01、html基本结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页标题</title> </head> <body&g...
2017前端招聘要求集合
机智的皮卡丘的博客
02-06 4161
要求熟练玩转前端技术三驾马车，掌握前端开发技术(HTML5、JS、JSON、XHTML、CSS3)，了解各项技术的相关标准，掌握Ajax异步编程； 能够写出高性能、可复用的前端组件 对OO、MVC、MVVM等编程思想有了解，对前端MV*框架有深刻理解，熟练掌握一个前端框架（Vuejs, AngularJS, React ）了解其原理； 熟练掌握React、Redux及相关框架和技术，有单页
三驾马车之三分之二总结
weixin_44762420的博客
06-21 196
学习了两个多月前端客户端，接下来是对HTML和CSS的一点总结，接下来学习Javascript，内容每天将会实时更新
总结前端面试过程中最容易出现的问题
qq_30325409的博客
04-15 1624
前言 【文章写于2年前】之前在兴安得力的时候，我也出过前端的面试题。那么前端人员在外面面试的时候，一般技术人员都会考察我们那些地方呢？我在这里不妨总结一下！（PS：有点小邪恶，这个公开之后，对于面试者来说是方便了。但是，假如你是公司技术人员，是面试官，您不妨修改一下题目，变通一下！） javascript常见题目 一、您对js的原型是如何理解的？您对js的继承是如何理解的？能否举
【Rust日报】 2019-07-02：用Python，Go和Rust编写同一程序之后的心得
Rust语言学习交流
07-02 1889
serenity: Discord API的Rust客户端 #Discord serenity librespot: 开源的Spotify客户端 #Spotify librespot 「Redox编程之夏博客系列」：为Redox OS实现ptrace Part 2 #RSoC 目前是本系列第三篇。 ptrace (process trace)系统调用通常与调试相关,它是本地调试...
2018你成长了么？一份给你的前端技术清单
weixin_33700350的博客
11-04 393
2018 眼看就要过去了，今年的你相较去年技术上有怎样的收获呢？ 记得年初的时候我给自己制定了一个学习计划，现在回顾来看完成度还不错。但仍有些遗憾，一些技术点没有时间去好好学习。 在学习中我发现，像文章这样的知识往往是碎片化的，而前端涉及到的面很多，如果不将这些知识有效梳理，则无法形成体系、相互串联。最后有一种东懂一块，西了解一点的感觉。...
哥德巴赫猜想1-一个拆两个
07-11
哥德巴赫猜想是一个数论问题，提出了这样一个猜想：任意大于2的偶数都可以表示为两个素数之和。根据这个猜想，你的问题是关于将一个偶数拆成两个素数之和的情况。让我来为你解答。 对于一个偶数n，我们可以遍历所有...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值