三周内构建 JavaScript 全栈 web 应用
我们还在 Waffle.io 网站上建设了火速开拓的面板,它是免费的,很轻易集成到 Github。我们在 Waffle 面板上摆列出全部用户故事以及必要我们去修复的 bug。之后当我们开始编码时,我们每小我私人会为本身正在研究的每一个用户故事建设一个 git 分支,在完成事变后归并这一条条的分支。 我们还开始保持晨会的风俗,接头前一天的事变和每一小我私人碰着的阻碍。集会会议经常抉择了当天的流程 —— 哪些人要结对编程,哪些人要独自处理赏罚题目。 我以为这种范例的事变流程很是好,由于它让我们可以或许清晰地找到本身的定位,不消记挂人际抵牾地高效执行事变。 第 5 步: 选择、下载样板文件因为 JavaScript 的生态体系过于伟大,我们不规划从最底层开始构建应用。把名贵的时刻花在连通 Webpack 构建剧本和加载器,把标记链接指向项目工程这些工作上感受很没须要。我的团队选择了 Firebones 框架,由于它刚好合用于我们这个环境,虽然尚有许多可供选择的开源框架。 第 6 步:编写后端 API 路由(可能 Firebase 监听器)假如我们没有效基于云的数据库,这时就应该开始编写执行数据库查询的后端高速路由了。可是因为我们用的是 Firebase,它自己就是云端的,可以用差异的方法举办代码交互,因此我们只必要配置好一个可用的数据库监听器。 为了确保监听器在事变,我们用代码做出了用于建设方针(Goal)的根基用户表格,现实被骗我们完成表格时,就看到数据库执行可更新。数据库就乐成毗连了! 第 7 步:构建 “观念证明”接下来是为应用建设 “观念证明”,也可以说是实现起来最伟大的根基成果的原型,证明我们的应用 可以 实现。对我们而言,这意味着要找个前端库来实现时刻线的渲染,乐成毗连到 Firebase,表现数据库中的一些种子数据。 ![]() Victory.JS 绘制的简朴时刻线 我们找到了基于 D3 构建的相应式库 Victory.JS,花了一天时刻阅读文档,用 VictoryLine 和 VictoryScatter 组件实现了很是基本的示例,可以或容许视化地表现数据库中的数据。现实上,这很有效!我们可以开始构建了。 第 8 步:用代码实现成果最后,是时辰构建出应用中那些令人等候的成果了。取决于你要构建的应用,这一重要步调会有些明明差别。我们按照所用的框架,编码出差异的用户故事并生涯在 Waffle 上。经常必要同时打仗前端和后端代码(好比,建设一个前端表格同时要毗连到数据库)。我们实现了包括以下这些大巨微小的成果:
有各类缘故起因,这一步花了我们许多时刻 —— 这一阶段是发生最多优质代码的阶段,每当我们实现了一个成果,就会有更多的工作要完美。 第 9 步: 选择并实现计划方案当我们行使 MVP 架构实现了想要的成果,就可以开始整理,对它举办美化了。像表单,菜单和登岸栏等组件,我的团队用的是 Material-UI,不必要许多深条理的计划常识,它也能确保每个组件看上去都很圆润平滑。 ![]() 这是我建造的最喜欢成果之一了。它美得令民气旷神怡。 我们花了一点时刻来选择颜色方案和编写 CSS ,这让我们在编程中苏息了一段美好的时刻。时代我们还计划了 logo 图标,还上传了网站图标。 第 10 步: 找出并镌汰 bug我们一开始就应该行使测试驱动开拓的模式,但时刻有限,我们那点时刻只够用来实现成果。这意味着最后的两天时刻我们花在了模仿我们可以或许想到的每一种用户流,并从应用中找出 bug。 ![]() 这一步是最不具体系性的,可是我们发明白一堆够我们忙乎的 bug,个中一个是在某些环境下加载动画不会竣事的 bug,尚有一个是资源组件会完全遏制运行的 bug。修复 bug 是件令人恼火的工作,但当软件可以运行时,又出格令人满意。 第 11 步:应用上线最后一步是上线应用,这样才可以让用户行使它!因为我们行使 Firebase 存储数据,因此我们行使了 Firebase Hosting,它很直观也很简朴。假如你要选择其余的数据库,你可以行使 Heroku 可能 DigitalOcean。一样平常来讲,可以在主机网站中查察行使声名。 我们还在 Namecheap.com 上购置了一个自制的域名,这让我们的应用越发完美,很轻易被找到。 ![]() 好了,这就是所有的进程 —— 我们都是这款适用的全栈应用的相助开拓者。假如要继承讲,那么第 12 步将会是对用户举办 A/B 测试,这样我们才气更好地领略:现适用户与这款应用交互的方法和他们想在 V2 版本中看到的新成果。 (编辑:湖南网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |