菜单

做 Web 应用要掌握的那多少个事

2019年3月25日 - jQuery

做 Web 应用要知道的这几个事

2015/07/21 · HTML5 ·
Web应用

本文由 伯乐在线
刘健超-J.c
翻译,黄利民
校稿。未经许可,禁止转发!
英文出处:blog.venanti.us。欢迎加入翻译组

在过去一年里,作者从零起先开发一向在自家的第3个关键的 Web
应用程序。此次经历教会了自笔者无数在此以前不明了的东西,尤其在钦州和用户体验方面。

笔者最后贰次尝试开发丰裕复杂的施用是在 二〇〇五年,所以就自个儿的立足点的话,有多如牛毛事物要求补给。

除开本身所知所见外,要切记本文清单里的始末。因为在开发 Web
应用时,越发是刚伊始做的时候,简单忘记一些重大的事体。

本条检查清单并不是一帆风顺,假若你是一个经验丰裕的开发者,那里可能没有让您感觉惊喜的事物,但自个儿期望能表达它是促进让您想起起部分失去的事物。

图片 1

安全性

肯定邮件:当用户注册时,应向他们发送带有点击确认邮箱的链接的邮件。如果用户更新他们的邮箱地址,则要重复重新那一个工作流程。

地点管理:当存款和储蓄密码时,首先对它们实行加盐和散列操作,然后再用现时大面积接纳的
crypto 库。即使您不这么做的话,把地点管理转由给 推特(TWTR.US) / GitHub /
 Facebook / 等,用 OAuth 就能成功。

加密:全数证件难点,还有啥样比 SSL
更好。使用它吧。仍可以运用 HSTS

证据:不要把服务器身份音讯(API
密钥、数据库密码等)放到版本控制里,不然就泄密了。

壹 、整理遗物:把无关首要的总想着之后恐怕会用到的事物丢掉,缺点和失误了几颗水钻的发卡,不再行路的钟表,尽管没有专门珍藏的意义,就丢了吗,尽管再昂贵的价钱,也错过了动用价值。

工程:动画

有着的爱,都以高尚的。但别为使用里的具备因素添加动画。因为超过四分之二 CSS
动画都会触揭橥局重绘;最佳尽大概地界定自身使用 transform 和 opacity。

防止实行缓慢的连通运算,要是非要使用,那么保障它是指向有个别属性的(如,”transition:
opacity 250ms ease-in” ,而不是 “transition: all 250ms ease-in”)。

贰 、收拾壁柜:衣橱总是最隐衷和芜杂的地点,压在产业的衣物,不再喜欢了的送给必要的人,过于陈旧的就剪开擦地板。

用户体验(UX)

表单:当提交八个表单后,用户应接受提交后的举报。假如提交后不向用户发送2个分歧的页面,那么就应当有弹框或
alert 一些音信,以便让用户了然这一次提交是不是中标。

报到重定向:假设用户打算在你的网站打开多个页面,但并没有登录,那么她们应有率先接受到1个能登录的页面,并在报到后重定向到一个他们原本想打开的一个页面(当然,前提是已取得授权)。

万一她们尝尝登录,但提供了三个张冠李戴的密码,那时,用户有恐怕是忘记了密码,那我们就活该提供3个视觉线索来唤起他们,要有二个重置密码的选项。

③ 、随手记帐:毫无作为,不明了什么度过了一每一天,不知情手里的money怎么着悄悄的丢失,那就记录下来,不是自家苛责,而是一种清晰条理,是何许把它们费用在了小编所必备和而热爱的东西上。

电子邮件

订阅设置:任何发送到用户的 email
,都应该至少含有叁个链接,能链接到修改他们的邮箱设置的应用程序页面,并且最佳每种邮件都有1个单身的链接,能收回订阅。

千万别让用户为了撤销订阅而向你发送邮件。

肆 、背单词:总是有想学一门语言的动机,但漫漫的经过让人在开头就慌张,背单词枯燥而粗鄙,伊始与持之以恒都很难,可是既然闲着也痛楚发慌,比不上试试啊。

移动端

即便如此您不要支付移动端…但不管你是或不是做,你都应当保险那是三个主动的决定,因为那会对你的应用程序设计和工程有实质性影响。

上边包车型客车注意事项是只要你已摘取移动端作为你的阳台之一。笔者刚好选拔 Grunt
作为本人的创设工具,所以笔者得使用部分 Grunt-specific
插件,但你可能选取类似的 JavaScript 创设筑工程具。

五 、养植物:植物是平静的伴随,有细小裂纹渗水而不可能再使用的水杯,用来随手撒一把种子吗,喜欢一种祥和积累的意义感,每一天长出的一片新叶,都以轻飘浅浅呼吸啊。

工程

单页面应用:到现在单页面(SPA)是王道。它的重大优势是很少加载整个页面 –
只需加载所需财富,并且毫不反复重载相同的能源。要是你才刚刚初始开发二个新的
web 应用,那它很或许是 SPA。

⑥ 、记点有意思的事物:刷尽了和讯、空间、朋友圈又光血虚度的时候,把遇见的在前边发亮的东西用笔记下来吗,想成为3个有趣的人,用笔记录那些让投机激动的笑笑的有感触的,当遇见有趣的人,再说给她们听,究竟,3个会讲遗闻的人是何其诱人啊。

用户界面(UI)

分辨率:当你付出 MVP (Minimum Viable Product
–最简化可实施产品)时,不用先急着相当各样尺寸的 UI
,那是等您的制品一下子火领悟后才须要去做的工作,但要确定保证帮忙主流设备(尺寸)。

七 、看一看天气预告:即使没那么规范,可是在每一日中午,不用那么慌乱的穿什么,纠结来纠结去,接着一整天要么觉得穿着不确切不自在。

UX:带宽

相对于桌面端,移动端的几个大主题是带宽,它是可怜难能可贵的财富。因而,不应当放过任何能压缩请求的机会,让它们尽恐怕地选取异步请求,并压缩请求财富的分寸。

JS & CSS – 合并与减弱:把面向具体选取的 JavaScript 和 CSS
 合并到独门文件里(叁个 JS,三个CSS),并展开压缩。Grunt-contrib-concatGrunt-contrib-cssmin 和 Grunt-contrib-uglify 都是您的好爱人。

拥有财富 – 使用
CDN:它有七个根本的优势。第②个是适用托管全部能源,并本地化。CDN
确定保证能源服务都置身二个区域,而该区域在地理地方上是挨着用户请求财富的地方,从而收缩加载时间。

其次个优势是更适用于您的重视文件(比如,非面向特定应用的体裁和 JS
代码)。为您所重视的文本使用 CDN
能十分大地回落加载时间。比如,很多网站注重 Angular.js,使用 CDN 链接
Angular
代码会触发缓存命中,那么移动设备会从设备缓存里摸索,而不是额外新建叁个HTTP 请求。

CSS – 减弱占用空间:抢先八分之四开发者在起来时阶段,很恐怕使用一些 UI 框架(如
BootstrapFoundation 等)。那么些框架可以相当的大,其压缩版日常可以常用的
CDN 上取得,但你不太大概使用它包含的保有样式。由此,类似
uncss 工具(一般配对的有 processhtml)能令你狐疑地移除最后未被使用的样式。

在意那点很重庆大学:uncss 解析器不可能领到动态样式(即由此 JavaScript
事件添加的体裁),所以你必须在浏览器进行严刻的测试,以管教不会去除应用程序实际利用的体制。

CSS –
将重庆大学的文书放在头顶:因为样式须求在利用达成加载前来看;次要的样式能在加载完后提供。

JS – 减弱占用空间:因为运用一旦上线,程序员就不须求考虑 JavaScript
代码里内部变量的可读性,由此得以将全数如 user.name 变量重命名为
u.e,从而收缩文件大小。因而,有叁个工具为此而生 –
下面提及到的 uglify,尽管它会使 JS
代码完全看不懂,但巨大地减小文件大小。

八 、好好搭配现有的服装:Taobao逛了1个又三个钟头,依旧索然无味头昏脑涨的关闭天猫界面,总以为衣橱里还差一件衣饰,既然那么累,不及想一想所负有的最佳的衬映。

用户体验:表单

那是三个很好的建议:保持表单和做事流程的简易性,当您针对移动设备作为安顿平台时,这一点更为关键。因为没有人乐于在四哥伦比亚大学上填满
5 页的表单。


本人期望那列表对于刚同志初步开发首款 Web
应用的你富有协理,甚至对那几个在此之前不纯熟前端的局地优化技术的后端或设计师。假使你有其余提议或记起有个别事物,那么请让自家了然,小编会考虑将它添加到该列表。

感谢 Chris Dean (@ctdean),Danny King
(@dannykingme) 和 Allen Rohner
(@arohner),他们非但审阅本文的文稿,而且添加了建议。

打赏帮衬本人翻译愈多好小说,多谢!


打赏译者

九 、发呆:没事就发发呆吧,纪念也好,幻想也好,它连接下意识的在向自个儿精通真正的所求,安静的和温馨相处一会,听一听大家和好。有个别业务是不可能告诉外人的,有个别事情是无须告诉旁人的,有些工作事情是根本不能告诉外人的,而且有个别业务是,就算告知了外人,

打赏帮忙我翻译更加多好作品,多谢!

任选一种支付办法

图片 2
图片 3

1 赞 1 收藏
评论

十 、过去的心理收藏行吗,即便那时的山再青、水再绿、那风再温柔,也是早就了,太深的依恋正是束缚,绊住的不只是今日,还有现在。

有关作者:刘健超-J.c

图片 4

前端,在路上…http://jchehe.github.io
个人主页
·
小编的篇章
·
19
·
    

图片 5

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图