前端前沿技术

news2024/11/17 14:36:00

文章目录

  • 网站静态化
  • PWA - Progressive Web APP, 渐进式 Web 应用
        • PWA 简介
          • 解决了哪些问题?
          • PWA 的优势
          • 浏览器支持情况
          • 参考文档
  • Weex 是一个可以使用现代化的 Web 技术开发高性能原生应用的框架。
      • 高性能
      • 跨平台
      • 贴近前端生态
      • 被大规模的使用
  • GraphQL
          • [一种用于 API 的查询语言](https://graphql.cn/)


网站静态化

以下网站供参考:

  • Gridsome【Vue】
  • VuePress【Vue】
  • Sapper【svelte】
  • UmiJS【React】
  • Gatsby【React】
  • Scully【Angular】
  • Compodoc【Angular】
  • Metalsmith【NodeJS】
  • Harpjs【NodeJS】
  • Assemble【NodeJS】
  • Zola【Rust】

PWA - Progressive Web APP, 渐进式 Web 应用

PWA 简介

全称:Progressive Web APP, 渐进式 Web 应用。

PWA 应用是指那些使用指定技术和标准模式来开发的 web 应用,这将同时赋予它们 web 应用和原生应用的特性。

例如,web 应用更加易于发现——相比于安装应用,访问一个网站显然更加容易和迅速,并且你可以通过一个链接来分享 web 应用。

在另一方面,原生应用与操作系统可以更加完美的整合,也因此为用户提供了无缝的用户体验。你可以通过安装应用使得它在离线的状态下也可以运行,并且相较于使用浏览器访问,用户也更喜欢通过点击主页上的图标来访问它们喜爱的应用。

PWA 赋予了我们创建同时拥有以上两种优势的应用的能力。

这并不是一个新概念——这样的想法在过去已经在 web 平台上通过许多方法出现了多次。渐进式增强和响应式设计已经可以让我们构建对移动端友好的网站。在多年以前的 Firefox OS 的生态系统中离线运行和安装 web 应用已经成为了可能。

PWAs, 不但如此,更是提供了所有的甚至是更多的特性,来让 web 更加优秀。

实际上是通过 Web 技术编写出的一个网页应用,加上 App ManifestService Worker 来实现 PWA 的安装和离线缓存等功能。

解决了哪些问题?
  • 可以添加至主屏幕,点击主屏幕图标可以实现启动动画及隐藏地址栏
  • 实现离线缓存功能
  • 实现了消息推送
PWA 的优势

PWA 是可被发现、易安装、可链接、独立于网络、渐进式、可重用、响应性和安全的。关于这些含义的细节,请参阅 PWA 的优势。

浏览器支持情况

参考浏览器支持

参考文档
  • 官网文档
  • 讲讲 PWA
  • pwa 技术在 vue 的使用
  • Workbox
  • 神奇的 Workbox 3.0
  • Service Worker 生命周期
  • 百度 Lavas

Weex 是一个可以使用现代化的 Web 技术开发高性能原生应用的框架。

高性能

Weex 使用原生组件和原生模块,来最大化利用原生渲染的性能优势以及平台能力,所有的组件和模块都是可插拔、可扩展的。

跨平台

你可以使用同一份代码编译成不同目标文件分别在 Web、Android 和 iOS 平台上运行。原生的组件和模块在不同平台中有不同的实现,但是它们都提供了相同的接口。

贴近前端生态

Weex 拥抱已有的 Web 生态,你可以使用现代化的前端技术开发移动应用。 Weex 支持了最常用 CSS 样式以及最流行的前端框架,如 Vue 和 Rax,在未来或许还可以支持更多。

被大规模的使用

Weex 已经在许多超级 App 中大规模使用,一共服务了数亿用户。Weex 还衍生出了各种工程化的产品和平台,以供 工业生产使用。

  • Weex 在线文档: https://weex.apache.org/zh/
  • Weex UI 文档: https://apache.github.io/incubator-weex-ui/#/cn/
  • Weex AMUI 文档: https://hminghe.github.io/weex-amui/#/?id=weex-amui
  • Weex Awesome: https://github.com/RodeyManager/awesome-weex

GraphQL

GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述,使得客户端能够准确地获得它需要的数据,而且没有任何冗余,也让 API 更容易地随着时间推移而演进,还能用于构建强大的开发者工具。

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

一种用于 API 的查询语言

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1201692.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

并发事务下,不同隔离级别可能出现的问题

并发事务下,不同隔离级别可能出现的问题 1、事务的 ACID2、并发事务下,不同隔离级别可能出现的问题2.1、脏写2.2、脏读2.3、不可重复读2.4、幻读 3、SQL 中的四种隔离级别 1、事务的 ACID 原子性(Atomicity):原子性意味…

数据结构 | 栈的实现

数据结构 | 栈的实现 文章目录 数据结构 | 栈的实现栈的概念及结构栈的实现 Stack.h初始化栈入栈出栈获取栈顶元素获取栈中有效元素个数检测栈是否为空销毁栈 Stack.c 栈的概念及结构 栈:一种特殊的线性表,其只允许在固定的一端进行插入和删除元素操作。…

勘察设计考试公共基础之数学篇

1、数学 向量点积:向量叉积:平面的法向量为n(A,B,C),则该平面的点法式方程为: A(x-x0)B(y-y0)C(z-z0)0 两平…

爬虫,TLS指纹 剖析和绕过

当你欲爬取某网页的信息数据时,发现通过浏览器可正常访问,而通过代码请求失败,换了随机ua头IP等等都没什么用时,有可能识别了你的TLS指纹做了验证。 解决办法: 1、修改 源代码 2、使用第三方库 curl-cffi from curl…

【T690 之十一】基于方寸EVB2开发板,结合 Eclipse+gdb+gdbserver 调试 CCAT 的流程总结

目录 1. 准备工作1.1 Eclipse1.2 工程编译1.3 烧写固件 2. 创建工程2.1 搭建调试工程2.2 配置Dbug调试信息 3. 调试4. 手动调试过程4. 总结 备注: 1,假设您已对方寸微电子的T690系列芯片的使用方式都有了一定的了解,可以根据此文的配置进行Li…

3D模型人物换装系统二(优化材质球合批降低DrawCall)

3D模型人物换装系统 介绍原理合批材质对比没有合批材质核心代码完整代码修改总结 介绍 本文使用2018.4.4和2020.3.26进行的测试 本文没有考虑法线贴图合并的问题,因为生成法线贴图有点问题,放在下一篇文章解决在进行优化 如果这里不太明白换装的流程可以…

基于物理的多偏置射频大信号氮化镓HEMT建模和参数提取流程

标题:Physics-Based Multi-Bias RF Large-Signal GaN HEMT Modeling and Parameter Extraction Flow 来源:JOURNAL OF THE ELECTRON DEVICES SOCIETY 摘要 本文展示了一种一致的Al镓氮化物(AlGaN)/氮化镓(GaN&#x…

CSS省略号n行公式

记得改图中的n,这是你需要的几行省略号!复制中间的5行就行了。 .text {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: n; //n为你想省略的行数,需要改-webkit-box-orient: vertical; } 这是…

卷积神经网络(1)

目录 卷积 1 自定义二维卷积算子 2 自定义带步长和零填充的二维卷积算子 3 实现图像边缘检测 4 自定义卷积层算子和汇聚层算子 4.1 卷积算子 4.2 汇聚层算子 5 学习torch.nn.Conv2d()、torch.nn.MaxPool2d();torch.nn.avg_pool2d(),简要介绍使用方…

时间序列预测实战(十三)定制化数据集FNet模型实现滚动长期预测并可视化结果

论文地址->官方论文代码地址 官方代码地址->官方下载地址Github 个人修改代码地址-> 个人修改版本呢的下载地址CSDN 一、本文介绍 本博客将介绍一种新的时间序列预测模型——FNet,它通过使用傅里叶变换代替自注意力机制,旨在解决传统Transf…

瑞吉外卖Day03

小张推荐:瑞吉外卖Day02 1.启用/禁用员工账号 1.1 思路分析 1.2Controller层 PutMapping()public R<String> update(RequestBody Employee employee, HttpServletRequest request) {log.info(employee.toString());Long emp (Long) request.getSession().getAttribu…

AI毕业设计生成器(基于AI大模型技术开发)

这是一个辅助生成计算机毕业设计的工具&#xff0c;可以自动完成毕业设计的源码。它基于几百个github上面开源的java和python项目&#xff0c;运用tengsorflow技术&#xff0c;训练出了AI大模型。基本实现了计算机毕业设计生成器&#xff0c;能够初步生成Java或python基本源码。…

遇到问题,我该如何提问?

作为IT行业的从业者&#xff0c;我们深知程序员在保障系统安全、数据防护以及网络稳定方面所起到的重要作用。他们是现代社会的护城河&#xff0c;用代码构筑着我们的未来。那程序员的护城河又是什么呢&#xff1f;是技术能力的深度&#xff1f;是对创新的追求&#xff1f;还是…

一些分享| 在线笔记、GIF图片生成方法

文章目录 在线笔记视频转GIF 本片博客旨在挖掘一些好用且免费的在线平台&#xff0c;持续更新中~ 正所谓科技解放双手&#xff0c;使用在线平台可以方便快捷地学习办公&#xff0c;节省时间。 在线笔记 语雀 https://www.yuque.com/dashboard 语雀是笔者用得最长最久的平台了…

Pandas教程(非常详细)(第五部分)

接着Pandas教程&#xff08;非常详细&#xff09;&#xff08;第四部分&#xff09;&#xff0c;继续讲述。 二十五、Pandas sample随机抽样 随机抽样&#xff0c;是统计学中常用的一种方法&#xff0c;它可以帮助我们从大量的数据中快速地构建出一组数据分析模型。在 Pandas…

2.5 CE修改器:寻找数值指针

上一步阐述了如何使用代码替换功能对付变化位置的数据地址&#xff0c;但这种方法往往不能达到预期的效果&#xff0c;所以我们需要学习如何利用指针&#xff0c;在本关的Tutorial.exe窗口下面有两个按钮&#xff0c;一个会改变数值&#xff0c;另一个不但能改变数值而且还会改…

初始MySQL(四)(查询加强练习,多表查询)

目录 查询加强 where加强 order by加强 group by 分页查询 总结 多表查询(重点) 笛卡尔集及其过滤 自连接 子查询 子查询当作临时表 all/any 多列子查询 #先创建三张表 #第一张表 CREATE TABLE dept(deptno MEDIUMINT NOT NULL DEFAULT 0,dname VARCHAR(20) NOT …

js随机生成颜色

封装一个函数 返回一个随机颜色 不传参数或者传true返回十六进制&#xff0c; 传false返回rgb模式 script>function Random(n, m) {if (n > m) {let temp nn mm temp}return Math.floor(Math.random() * (m - n 1)) n}function getRandomColor(flag true) {if (fl…

力扣第647题 回文子串 c++ 动态规划 双指针 附Java代码 注释解释版

题目 647. 回文子串 中等 相关标签 字符串 动态规划 给你一个字符串 s &#xff0c;请你统计并返回这个字符串中 回文子串 的数目。 回文字符串 是正着读和倒过来读一样的字符串。 子字符串 是字符串中的由连续字符组成的一个序列。 具有不同开始位置或结束位置的子串…

【中国知名企业高管团队】系列66:老板ROBAM

昨天华研荟为您介绍了厨电领域的TOP企业——方太FOTILE的发展历程&#xff0c;以及作为企一代茅理翔和企二代茅忠群的创业故事。 今天为您介绍同处浙江的老板电器。 一、关于老板电器 以下内容来自老板电器官网介绍&#xff1a; 杭州老板电器股份有限公司创立于1979年&…