微话搭建优质 Web 应用

伴随前端计划的快速更新,搭建个人网站,已然变得极其容易,方式也越发多样;加上 Progressive Web Apps(PWA)不断普及,极大的提升了 Web 页面表现,改善了用户体验,让 Web 应用成为了现实。前几年,在公司内部,有根据自己的一些实践,做了关于「搭建优质 Web 应用」的分享,现同步于此,希望能给更多想搭建 Web 应用的朋友一些参考。

备注声享,是一个非常出色的、在线制作 PPT 网站;早在 2017 年就基于声享而做此分享内容;可惜,这两年声享已不再能够访问,早年的分享资料,也就此遗失;可见数据备份的重要性,尤其是存储在互联网上的内容。今偶在个人 Mac 访问之,或许是缓存之缘故,竟又得其内容,便梳理出来,整理于此,以享看官。

故事

为何要搭建一款 Web 应用(独自)?😄

  • 服务自己 & 大众;
  • 增长相关技艺;
  • 搭建个人品牌;
  • 开拓收入来源;
  • 额外收益(面试、交朋友等);
  • Influence is money

整一款什么样子的 Web 应用?😉

Awesome List? 工具站?社区?博客?... ...

  • 有趣!
  • 有范儿!
  • 有价值!

策划

**这是其中极为重要的一环!**✍️

  • 功能主旨;
  • 全局规划;
  • 交互哲学;
  • 视觉设计;

编码

如若想好了,那接下来就是一个字:“干”(四声调😂)

  • 前端:Vue |React | Angular ... ...
  • 后端:Node(Koa2) + MongoDb + Redis / ...
  • 编辑器:VsCode|​​​​​​​ SublimeText3 | Atom;
  • 代码规范:Prettier、Eslint、Airbnb ...
  • 代码提交:husky、lint-staged、pre-commit、Gitmoji

部署

这一步对于我前端选手来讲,需要学习的有点多 😊

  • 域名 :最好是语义话很强的名字 👐🏻
  • 服务器DigitalOcean, 阿里云 ... ...
  • Https : 这个不仅得有,且必须得有。
  • 备案 :备案难,难过上蜀道 & 青天 😂。
  • 运维 :Nginx/ Pm2 / Zsh... ...
  • CI/CD : Docker ( ! So Nice.) K8S ...

优化

优秀的产品必经不断的锤炼和优化♻️

运营

做了一款优秀产品,没更多人知道,谁之过耶?🙃

  • 社区分享:知乎简书倾城之链V2ex, HacPai ...
  • 社交平台:朋友圈,微博,FB,Twitter ...
  • 个人影响:前面是不是有提到"个人品牌"呢?
  • 自传播:SEO | 依靠用户自发安利?

示例

没有实践,没有发言权,SO:得有示例 😊

  • 项目名称:倾城之链
  • 项目意义:作为一个开放平台,旨在云集全球优秀网站,探索互联网中更广阔的世界; 在这里,你可以轻松发现、学习、分享更多有用或有趣的事物;
  • Github 代码(前端): nicelinks-vue-client,后端代码,因为些原因,已放在个人仓库。

模板

经一番折腾,对搭建一款 Web 应用,在技术上有了些积累,便将可公用的代码,抽离了出来,开源于 Github 仓库:Docker Vue Node Nginx Mongodb Redis(🐉 An awesome boilerplate, Integration Docker, Vue, Node, Nginx, Mongodb and Redis in one, Designed to build & develop your web applications more efficient and elegant),以便对于有此爱好的朋友,可以有所参考。除此外,在这期间,因为用到的技术较多,也就开始维护一份与时俱进版前端资源教程

您可能感兴趣的文章