{"id":28756816,"url":"https://github.com/wx-chevalier/frontend-notes","last_synced_at":"2025-07-11T15:40:19.901Z","repository":{"id":105126494,"uuid":"53203588","full_name":"wx-chevalier/Frontend-Notes","owner":"wx-chevalier","description":":books: 大前端的工程实践：iOS 篇 | Android 篇 | 混合式开发篇 - ReactNative、Weex、Weapp","archived":false,"fork":false,"pushed_at":"2024-09-21T09:32:55.000Z","size":1415,"stargazers_count":208,"open_issues_count":0,"forks_count":42,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-06-17T03:08:52.070Z","etag":null,"topics":["android","ios","react-native","weapp","weex"],"latest_commit_sha":null,"homepage":"https://ng-tech.icu/books/Frontend-Series","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wx-chevalier.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-03-05T13:51:45.000Z","updated_at":"2025-01-02T11:49:55.000Z","dependencies_parsed_at":"2023-09-17T03:46:42.358Z","dependency_job_id":null,"html_url":"https://github.com/wx-chevalier/Frontend-Notes","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/wx-chevalier/Frontend-Notes","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wx-chevalier%2FFrontend-Notes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wx-chevalier%2FFrontend-Notes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wx-chevalier%2FFrontend-Notes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wx-chevalier%2FFrontend-Notes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wx-chevalier","download_url":"https://codeload.github.com/wx-chevalier/Frontend-Notes/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wx-chevalier%2FFrontend-Notes/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264842142,"owners_count":23671942,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","ios","react-native","weapp","weex"],"created_at":"2025-06-17T03:08:51.478Z","updated_at":"2025-07-11T15:40:19.879Z","avatar_url":"https://github.com/wx-chevalier.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 大前端与人机交互\n\n随着 Web 技术的迅猛发展，ReactNative, Weex, Weapp 为代表的混合式开发日趋成为与 Android、iOS 原生开发并肩的开发模式之一；而在可预见的未来，VR、AR、WebAssembly 等一系列技术粉墨登场，原本前端之间的隔阂逐渐消亡，我们慢慢进入了大前端的时代。\n\n# Preface | 前言\n\n![](https://tva2.sinaimg.cn/large/007DFXDhgy1g4wxluw2a6j30ku0h9jsw.jpg)\n\n前端开发是一系列技术、实践和机构的综合，它主要由两种力量构成：其一是硬件，或者更具体地说是消费级设备；其二就是对盈利收益的不变追求，这一点与其他所有行业是一致的。\n\n![](https://tva2.sinaimg.cn/large/007DFXDhgy1g4rc4vwxg1j30u00eagm4.jpg)\n\n近年来，我们看到消费设备的种类经历了一场爆发式增长——智能手表、智能眼镜、智能音箱、智能电视、可折叠智能手机，等等——在物联网（IoT）时代，每天都可能有新的事物戴上名为“智能”的帽子加入智能设备大家庭，人们对此早已习以为常。\n\n## 跨端混合开发\n\nHybrid 技术分为两个大的分支，一个以 Cordova 为代表的基于系统的 WebView 与本地调用。另一种早期以 Titanium、Tamarin，如今以 React Native 这样为代表的 Cross Compilation，即跨平台编译技术。因为每个平台都有浏览器，也都有 WebView 控件，所以我们可以使用 HTML，CSS 和 JavaScript 来将 web 的内容和体验搬到本地。通过这样做我们可以将逻辑和 UI 渲染部分都统一，以减少开发和维护成本。这种方式开发的 app 一般被称为 [Hybrid app](http://blogs.telerik.com/appbuilder/posts/12-06-14/what-is-a-hybrid-mobile-app-)，像 [PhoneGap](http://phonegap.com) 或者 [Cordova](http://cordova.apache.org) 这样的解决方案就是典型的应用。除了使用前端开发的一套技巧来构建页面和交互以外，一般这类框架还会提供一些访问设备的接口，比如相机和 GPS 等。\n\n![hybrid-app](https://onevcat.com/assets/images/2015/hybrid-app.jpg)\n\n虽然使用全网页的开发策略和环境可以带来代码维护的便利，但是这种方式是有致命弱点的，那就是缓慢的渲染速度和难以驾驭的动画效果。这两者对于用户体验是致命而且难以接受的。随着三年前 Facebook 使用 native 代码重新构建 Facebook 的手机 app 这一[标志性事件](https://www.facebook.com/notes/facebook-engineering/under-the-hood-rebuilding-facebook-for-ios/10151036091753920)的发生，曾经一度占领半壁江山的网页套壳的 app 的发展也日渐式微。特别在现在对于用户体验的追求几近苛刻的现在，呆板的动画效果和生硬的交互体验已经完全无法满足人民群众对高质量 app 的心理预期了。\n\n“ 一次编码，处处运行 ” 随着技术的发展，不同平台的差异会更加体现在设计，而非实现。\n\n# About\n\n## Copyright \u0026 More | 延伸阅读\n\n[![技术视野](https://s3.ax1x.com/2021/02/21/yTSKdH.png)](https://github.com/wx-chevalier/Awesome-MindMaps)\n\n您还可以前往 [NGTE Books](https://ng-tech.icu/books-gallery/) 主页浏览包含知识体系、编程语言、软件工程、模式与架构、Web 与大前端、服务端开发实践与工程架构、分布式基础架构、人工智能与深度学习、产品运营与创业等多类目的书籍列表：\n\n[![NGTE Books](https://s2.ax1x.com/2020/01/18/19uXtI.png)](https://ng-tech.icu/books-gallery/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwx-chevalier%2Ffrontend-notes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwx-chevalier%2Ffrontend-notes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwx-chevalier%2Ffrontend-notes/lists"}