H5 hybrid-前端资源本地化方案纪要

  • 就整个行业来说,大前端是趋势,现阶段,native方面除了一些偏CPU密集型工作与操作系统底层API方面的工作外,H5基本都可以满足需要。
  • 目前的工作更偏向前端架构多一点,除了要对FE负责,还要对整体项目以及其他部门(配合)负责。本地资源本地化方案本身就源于此。
  • 在此简要总结下个人对 Hybrid开发中 以H5为主的SPA的资源本地化方案,本方案针对于基于IOS/Android双端Webview的Hybrid开发。
  • 截止发文时间,依托于此方案的项目已稳定上线。
  • 项目基于敏捷开发管理方案,并处于持续迭代中。
  • 细节方面,三言两语很难阐述清楚,在此主要简单记录一些方向性和思路性的问题。

方案目标/优势

  • 严格保证弱网或断网情况下App的可用性。
  • 在保证性能与体验的基础上,尽可能降低native成本。
  • 提升H5流畅性体验
  • 方便快速迭代

方案可行性调研

  • 前端资源所占的高比重是否会对Native发版造成影响?
  • HTTP(S)协议 转变为 file协议后,对前端资源加载(原生加载)的影响?
  • HTTP(S)协议 转变为 file协议后,对 bridge 功能的影响(native通信、native资源加载、HTTP(S) proxy请求)等?
  • HTTP(S)协议 转变为 file协议后,React Router的 hash模式 或 history模式功能的可用性?
  • Webpack工程化对FE工作流下各场景(devServer、native devServer、build、syncDev、syncBuild、publish等)的支持程度?

注意事项 & 功能点

  • 前端资源版本迭代机制?
  • 前端资源的更新机制?
  • 前端资源与Native资源的对应机制?
  • 前端资源的加密与解密机制?
  • 前端资源的线下同步、上线、回滚机制?
  • bridge API 的便利性?

持续优化

  • 前端脚手架的持续优化
  • splitChunkPlugin 的持续优化、资源本地化与前端资源差量更新的探索
  • react-router-dom的最佳实践(路由与组件的匹配标准化、对单个路由定制的规范化与便利性的提升等)
  • 持续的 Native 体验优化
  • react hooks 的性能优化与规范化

H5 hybrid开发-前端资源本地化方案纪要的更多相关文章

  1. H5静态资源本地化实践

    现在很多app都是通过webview内嵌H5的页面,这种方式的好处就是无需发版就能更新线上的内容,而且可以做到多平台的统一开发,节约开发成本.但是这种模式也带来了一定的问题,web开发很大程度依赖于网 ...

  2. 关于web开发前端h5框架的选择

    关于web开发前端h5框架的选择 看了很多移动版框架都是基于app混合式开发的,不是单独h5网站的基于h5开发的web框架从组件丰富度,兼容性,相关教程来说bootstrap还是最好的react和vu ...

  3. Web前端,HTML5开发,前端资源,前端网址,前端博客,前端框架整理 - 转改

    Web前端/H5开发,前端资源,前端网址,前端博客,前端框架整理 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v ...

  4. 【前端知识体系-JS相关】对移动端和Hybrid开发的理解?

    1.hybrid是什么,为何使用hybrid呢? 概念: hybrid就是前端和客户端的混合开发 需要前端开发人员和客户端开发人员配合完成 某些环节也可能会涉及到server端 大前端:网页.APP. ...

  5. GitHub最全的前端资源汇总仓库(包括前端学习、开发资源、求职面试等)

    在GitHub上收集的最全的前端资源汇总(包括前端学习.前端开发资源.前端求职面试等) 个人结合github上各位大神分享的资源进行了简单的汇总整理,每一个条目下面都有丰富的资料,是前端学习.工作的好 ...

  6. 基于Laravel开发博客应用系列 —— 使用Bower+Gulp集成前端资源

    本节我们将讨论如何将前端资源集成到项目中,包括前端资源的发布和引入.本项目将使用 Bower 和 Gulp 下载和集成jQuery.Bootstrap.Font Awesome 以及 DataTabl ...

  7. Android Webview H5资源本地化

    Android Webview H5资源本地化 一. 创建读取资源项目独立模块 1. 项目依赖的好处 符合模块化的思想,他们相互独立.一个项目持有另一个项目的引用,修改更加方便. (注:compile ...

  8. 【JavaScript&jQuery】前端资源大全

    综合类 综合类 地址 前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.html 前端知识结构 https://github.com/Jackson ...

  9. 有关 Hybrid 开发模式实践总结

    前言 随着公司业务不断发展,移动开发项目越来越多,项目任务时间紧,我们内部开发流程是以项目为导向,有别于一般公司对产品不断迭代的做法,但移动端开发人员资源有限,需要在不同项目之间做业务场景切换开发,就 ...

随机推荐

  1. HarmonyOS三方件开发指南(13)-SwipeLayout侧滑删除

    鸿蒙入门指南,小白速来!0基础学习路线分享,高效学习方法,重点答疑解惑--->[课程入口] 目录:1. SwipeLayout组件功能介绍2. SwipeLayout使用方法3. SwipeLa ...

  2. Qt update刷新之源码分析(二)

    大家好,我是IT文艺男,来自一线大厂的一线程序员 上次视频给大家从源码层面剖析了Qt update刷新机制的异步事件投递过程,这次视频主要从源码层面剖析Qt刷新事件(QEvent::UpdateReq ...

  3. Deep Unfolding Network for Image Super-Resolution 论文解读

    Introduction 超分是一个在 low level CV 领域中经典的病态问题,比如增强图像视觉质量.改善其他 high level 视觉任务的表现.Zhang Kai 老师这篇文章在我看到的 ...

  4. `vi`——终端中的编辑器

    `vi`--终端中的编辑器 目标* `vi` 简介* 打开和新建文件* 三种工作模式* 常用命令* 分屏命令* 常用命令速查图 01. `vi` 简介 1.1 学习 `vi` 的目的 * 在工作中,要 ...

  5. WIFI6 基本知识(二)

    WI-FI6核心技术 WI-FI6除了继承了WI-FI5的所有MIMO特性之外,还增加了许多针对高密部署场景的特性.以下是WI-FI6的核心新特性: OFDMA频分复用技术 DL/UL MU-MIMO ...

  6. LNMP配置——Nginx配置 —— 用户认证

    一.配置 再来创建一个新的虚拟主机 #cd /usr/local/nginx/conf/vhost #vi test.com.conf 写入: server { listen 80; server_n ...

  7. 源码解析之 Mybatis 对 Integer 参数做了什么手脚?

    title: 源码解析之 Mybatis 对 Integer 参数做了什么手脚? date: 2021-03-11 updated: 2021-03-11 categories: Mybatis 源码 ...

  8. Django之Auth认证模块

    一.Auth模块是什么 Auth模块是Django自带的用户认证模块: 我们在开发网站的时候,无可避免的需要设计实现网站的用户系统,此时我们需要实现包括用户注册,用户登陆,用户认证,注销修改密码等功能 ...

  9. 微信小程序应用开发-手动创建

    基础知识: index.wxml的代码为 Html,有很多标签,如等 index.wwss相当于css 即样式 index.js中有很多函数,可自定义 操作步骤: 删除app.json文件中page/ ...

  10. MUV LUV UNLIMITED Gym - 102361K

    题目链接:https://vjudge.net/problem/Gym-102361K 题意:两个人轮流取树叶,最后没有树叶取的人输. 思路:求出所有树叶所在链的长度即可,如果都为偶数先手必败,否则先 ...