写点什么

简简单单才是真,初试 Svelte

用户头像
LeanCloud
关注
发布于: 2021 年 04 月 22 日
简简单单才是真,初试 Svelte

作者:LeanCloud weakish


最近团队内部需要一个上传文件的 web 小工具,需要写一个简单的前端页面。 像这样的小工具,如果引入 React 和 Vue,似乎太重了,所以想尝试下 Svelte 这个无框架之框架(最终会编译成不带框架的 JS 代码)。


闲话少叙,直接上手。 首先,生成模板项目:


npx degit sveltejs/template fileup
复制代码


长期以来 Svelte 的一大痛点是不支持 TypeScript,不过去年开始也加入了 TypeScript 支持。 当然,像这样简单的小工具,直接用 JavaScript 写也没什么差别。 不过我还是打算用下 TypeScript。


和其他一些模板生成工具不同,Svelte 官方没有提供单独的 TypeScript 模板项目仓库,也不会在生成模板的过程中让你选择是用 TypeScript 还是 JavaScript,而是在生成模板项目后,运行一个脚本把项目转成 TypeScript 项目:


node scripts/setupTypeScript.js
复制代码


转换之后,执行常规的依赖安装步骤,就可以运行了:


npm installnpm run dev
复制代码


项目使用 npm 管理依赖,使用 rollup 打包,这些都不用操心,对于简单项目而言,只需修改 src/App.svelte 即可,模板、样式、交互逻辑都写在这一个文件中(这和 Vue 有点像):


<script lang="ts">// TypeScript 代码</script>
<style>/* CSS 代码 */</style>
<!-- Svelte 模板代码 -->
复制代码


先来编写上传界面,google 一下,找到一个现成的组件 svelte-file-dropzone


npm i svelte-file-dropzone
复制代码


将它加入依赖,在 App.sveltescript 部分引入,并编写相应的 TypeScript 代码和 Svelet 模板代码:


<script lang="ts">import Dropzone from "svelte-file-dropzone";
let files: File[]function handleFilesSelect(e) { files = e.detail.acceptedFiles}</script>
<Dropzone on:drop={handleFilesSelect}> Click to select files, or drag and drop some files here.</Dropzone>
复制代码


获取选定的文件之后,再上传文件。 文件会上传到 LeanCloud,LeanCloud 是一家 BaaS 云服务商,也提供文件托管服务。 「svelte」的意思是「slender and elegant」,和「lean」也算是近义词,从这个角度说,这两个听起来还挺配的。


同样,我们先把 LeanCloud 的 JavaScript SDK 加入依赖:


npm i leancloud-storage
复制代码


然后初始化 SDK:


import LC from "leancloud-storage";
const appId = "your app id";const appKey = "your app key";const serverURL = "https://your-custom-domain.example.com";
LC.init({ appId, appKey, serverURL,});
复制代码


appIDappKey 可以从 「LeanCloud 控制台 > 设置 > 应用 Keys」查看,serverURL 是在 LeanCloud 绑定的域名。 当然,这需要首先在 LeanCloud 注册账号并创建应用。 应有关部门的要求,LeanCloud 国内版需要绑定已备案的域名,如果不想绑域名或者域名没有备案,可以用 LeanCloud 国际版


国际版初始化时无需传入 serverURL


LC.init({    appId,    appKey});
复制代码


上传文件非常简单,只需两行代码:


async function uploadFile(toUpload): Promise<String> {    const uploaded = await new LC.File(toUpload.name, toUpload).save();    return uploaded.get("url");}
复制代码


上面的代码中,用 new LC.File(文件名, 文件) 构建文件后,调用 save 方法保存到云端,之后就可以通过 url 属性得到可以访问该文件的 URL。


到目前为止,我们已经完成了最核心的功能,选取文件和上传文件,只剩下最后一步,把获取的 URL 显示给用户了。


{#if files}  <h2>Files</h2>  {#each files as file, i}    {#await uploadFile(file)}      <p>Uploading {file.name} ({file.size} bytes) ...</p>    {:then url}      <p>Uploaded:        <code>{url ?? ""}</code>      </p>    {:catch error}      <pre>{error}</pre>    {/await}  {/each}{/if}
复制代码


这里用到了 Svelte 的模板语法。 估计是为了节省写解析器的功夫,Svelte 的模板语法看起来有点别扭(#if/if:catch),但是忽略这些视觉上小小的不适,整体上还是清晰易读的。 先用 if 判断是否选取了文件,只有在选取了文件的情况下,才会显示文件列表。 接着用 each 遍历所有选中文件,进行上传操作,并在上传过程中显示文件的名称和大小,上传完成后则显示文件的 URL。 当然,几乎所有程序都少不了错误处理的部分。 因为这是一个内部工具,所以就直接在网页上显示错误信息了,没额外做更多处理。 注意这里用了 await 等待上传文件的异步函数返回结果,获取到结果后将它赋值给 url 变量,然后就可以直接在界面中使用 url 变量了。


好了,大功告成,不到 50 行代码,就完成了这个简单的上传工具。 回头看看代码,非常直截了当。 但仔细想想,还是很神奇的,比如只是通过 files = e.detail.acceptedFiles 这一行赋值操作,界面就能感知到 files 的变化,相应地渲染不同的内容。 这是因为 Svelte 会把 = 编译为类似 React 等框架中的 setState 方法。 有些人可能觉得这有些太魔法了,但其实大多数编程语言中 = 就挺魔法的,比如会有 x = x + 1; 这样的语句,只是大家都习惯了而已。


最后需要把它部署到一个地方。 因为是个纯静态页面,所以部署到什么地方都行。 既然文件托管已经用了 LeanCloud,那网页也部署到 LeanCloud 吧。


运行以下命令编译、打包项目:


npm run build
复制代码


然后运行以下命令即可部署至 LeanCloud:


cd publiclean switch --region CN --group web YOUR_APP_IDlean deploy --prod 1
复制代码


这里 CN 表示 LeanCloud 华北节点,web 是云引擎分组的名称,如果使用了其他节点或者 LeanCloud 国际版,或者分组名称不同,需要修改相应的值,具体可以查看「LeanCloud 控制台 > 云引擎 > 云引擎分组 > 部署 > 命令行工具」的说明。


如果没有安装 LeanCloud 命令行工具,需要先安装并关联账号,关联账号的步骤同样可以上述控制台区域找到。 另外,要访问部署在云引擎上的页面,还需要绑定一个云引擎域名,或者申请一个 avosapps.us 下的子域名(仅限国际版)。


下面是部署后的效果图:


fileup-demo


可以看到,为了方便复制 URL,我加了复制到剪贴板的按钮。 使用 svelte-copy-to-clipboard 组件:


npm i svelte-copy-to-clipboard
复制代码


只需添加 10 行代码:


<script lang="ts">import CopyToClipboard from "svelte-copy-to-clipboard";// 略
function handleSuccessfulCopy(i) { copyStatuses[i] = '✅'}function handleFailedCopy(i) { copyStatuses[i] = '❌'}</script>
<!-- 略 -->{#if files} <h2>Files</h2> <!-- 略 --> {:then url} <p>Uploaded: <code>{url ?? ""}</code> <CopyToClipboard text={url} on:copy={() => handleSuccessfulCopy(i)} on:fail={() => handleFailedCopy(i)} let:copy> <button on:click={copy}>{copyStatuses[i]}</button> </CopyToClipboard> </p> <!-- 略 -->{/if}
复制代码


如果希望进一步改善用户体验,还可以在上传时显示进度。 这项改进就留给读者作为练习(提示)。


不能免俗,用 LightHouse 跑个分:


fileup lighthouse


之前写页面的时候我并没有考虑性能,但性能评分仍然达到了 100。 SEO 和可访问性方面有些小问题,改起来不麻烦,同样留给读者作为练习。 好吧,你也许已经发现了,我只是在为我自己的懒惰找借口。 不过,如果你真的完成了这些练习,欢迎来提 pr


写到这里差不多要结束了,总结一下。 就小工具和交互不多的站点而言,Svelte 写起来更加直截了当,和 React、Vue 相比,编写的代码更加简明扼要, 套路代码(boilerplate code)更少,编译出的代码更加轻量,因此对个人健康(节省键盘敲击次数,避免肌肉劳损)和世界环境(访问者加载和运行的代码更少,显著降低碳排量)都更友好。 Svelte 这样的无框架(frameless)框架和 LeanCloud 这样的无服务器(serverless)云服务,抽象掉了大量无关业务的细节,可以让开发者专注项目的核心功能,提升开发效率,改善开发体验。


题图 Paul Gilmore

发布于: 2021 年 04 月 22 日阅读数: 13
用户头像

LeanCloud

关注

https://www.leancloud.cn/ 2019.10.30 加入

LeanCloud 是领先的 serverless 云服务提供商,提供包括数据存储、文件存储与 CDN、消息推送和即时通讯在内的后端云服务,同时提供支撑后端代码的云引擎和云函数等开发工具,全面涵盖移动开发的需求。

评论

发布
暂无评论
简简单单才是真,初试 Svelte