调整香草网站以部署为 webapp 的最佳方式？ [关闭]答案

【问题标题】：Best way to adapt vanilla site to deploy as webapp? [closed]调整香草网站以部署为 webapp 的最佳方式？ [关闭]
【发布时间】：2020-08-15 08:54:12
【问题描述】：

我一直在开发一个“网络应用程序”，目前它实际上是一个网站，完全是原生的，由 HTML、CSS 和 JavaScript 制作；绝对没有外部库或框架，如 JQuery、React 或 AngularJS。

我的目标是有一天将网站部署为移动设备（iOS 和 Android）和桌面（Windows 和 Mac）的网络应用程序。

最好的方法是什么？我应该走哪条路？

提前致谢！

编辑：我想该网站可以被视为一个应用程序，因为它是 SPA，因为它使用了 JS，并且由于 CSS 中的媒体查询几乎完全响应。

这里的主要问题是：如何从托管在通过域访问的远程服务器上的网站应用程序获取可用于移动设备和台式机的可安装应用程序（.ipa、.apk、.exe、.app 等） ?

【问题讨论】：

这是一个非常广泛的问题，很难在一个回复中回答。谷歌“跨平台应用开发”了解基础知识。

标签： javascript html css deployment web-applications

【解决方案1】：

我想这个问题有几个层次。让我们从一些术语开始：
响应式网页：适用于多种不同屏幕分辨率的网页（只需要使用媒体查询的 CSS）
SPA：单页应用程序，这是您获取网络“应用程序”而不是网页的方式。 React 和 Angular 之类的工具在这方面有很大帮助，因为您现在需要管理状态和路由等内容（因为您不再实际更改您所在的页面）。
PWA： Progressive Web App，这是最现代的 Web 应用程序类型，它通过能够在没有 Internet 连接的情况下工作等等，试图表现得非常像原生应用程序。

开始走这条路的一个好方法是使用 React 和他们的优秀工具 Create React App https://reactjs.org/docs/create-a-new-react-app.html#create-react-app 这是一套已配置为创建 SPA（即 PWA）的工具，以及创建出色 Web 应用程序所需的所有其他现代工具。您需要阅读有关如何创建响应式网页的信息，但是这方面有很多资源，我的建议是从媒体查询 https://www.w3schools.com/css/css_rwd_mediaqueries.asp 以及学习 Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：

好的，那么我会说我的网站确实是一个应用程序，尽可能地普通。它实际上是 SPA，没有任何重新加载，这要归功于一些非常干净的 JS，如果我可以这么说的话，我自己呵呵，而且我目前正在通过使用媒体查询使其响应速度越来越快，这很简单，我'这对我来说很好，这很好:P 而且反应部分正是我想要的。所以我不妨问一下，React 和 Angular 是一回事吗？如果是这样，哪个更容易学习，哪个专业使用更广泛？
另外，在 Flexbox 上使用 CSS 网格不是更好吗，这样如果我希望移动 UI 上的外观与桌面版本略有不同，我可以完全重新排列项目？顺便感谢您的快速回复，我一定会查看链接！
Re: Grid vs Flexbox，主要取决于您想要的浏览器支持，Grid 仍然有些新。但话又说回来，渐进增强和优雅降级是关键思想。如果您的应用在不支持 Grid 的浏览器上看起来有点不同，那么请继续！
Re: Angular vs React，在很多方面，是的。它们都是帮助您构建复杂应用程序的绝佳工具。 Angular 是一个框架（默认包含更多），而 React 是一个主要用于视图渲染的库（因此您需要用于路由的插件，也许是状态管理等）。两者都在专业上同样使用，但在不同的领域，Angular 可能更容易学习，因为默认情况下所有东西都在盒子里，但都有很好的社区可供学习。如果你只从 React 开始并根据需要添加东西，那么 React 作为开始会更容易，但这也是一个品味问题。
它还可能取决于您将构建的规模、您熟悉的其他技术等。Angular 的服务和依赖注入可以让人感觉非常“后端”，而 React更受函数式编程和声明性代码的启发。有很多文章比较这两者，但每一篇都能很好地完成工作，如果你不理解它们，每一篇都会给你开枪。如果你没有其他背景，我的建议是 React，但要慢慢开始，只有在需要时才添加更多内容。