从 mCast 聊聊申明式 UI(Vue.js 与 SwiftUI)和原型构建效率
作为玩票性质的 Vue.js 用户和 iOS/macOS 开发,这个标题对于我来说,写起来本来是没有多少底气的。不过半年前我花了点业余时间和朋友写了个 macOS 的播客客户端 mCast
,获得了一些第一手的感悟,故此写篇文章聊聊我的想法。
先说结论,申明式 UI 及配套的现代工具链(Hot Reload,Live Editing)能够大幅提高原型构建的效率,而且对经验不丰富的开发者尤为明显。
我们先不妨看看 mCast 的设计、原型和最终实现的过程。
设计
mCast
并不是要做一个全尺寸的桌面端播客客户端,它只是来自我几个简单的想法
- 一个 macOS menubar 应用,永远可以快速通过鼠标访问
- 类似于 iOS 的应用设计
- 核心功能就是:搜索、浏览热门,然后收听
第一点对于一个开了十几个应用窗口的人来说是刚需,第二点意味着这个应用就是个 Single Page App,第三点代表着这个应用不会去做播客下载等功能,因为在桌面平台上,我们假设网络是永远可达的。
有了这几个点子,这个应用该长什么样在脑海里就有个基本的概念了。接下来只需花个两分钟,把一个 iOS 播客应用的截图,放到 macOS menubar 上就行了
对于首页而言,这个可以说就是设计稿了。我们觉得它看起来还不错,像那么一回事。接下来就是写个原型,看看如果这个应用跑起来的话,是不是能够解决我们前面提到的那些痛点。
原型
既然是要写原型的话,一定是尽可能的使用廉价的方式。这里就不得不提我的情况,我并没有太多的设计经验,不具备专业的设计能力。
也就是说,这个页面里面,字体是多大,部件的大小、间距、阴影该是多少,我还没有一套科学的方案。这种情况下,要想知道怎么进行布局才最“悦目”,唯一的办法就是不断的试错。所以,在构建原型时,代码/UI 修改一定要尽可能的轻松和快速。
此外,原型设计工具如果能够尽可能接近我的 mental model,那就再好过了。
基于以上两点,我决定在 codesandbox 上,使用 Vue.js 来书写第一个原型。完成以下的效果,花了一小时不到。
核心模板代码也很简单
<div id="home"> <input v-model="query" type="search" placeholder="Search or enter url" v-on:change="updateQuery" spellcheck="false" /> <div class="filters"> <div class="filter"> ...