菜单

做 Web 应用要精通的那一个事

2019年4月1日 - JavaScript

做 Web 应用要领会的那么些事

2015/07/21 · HTML5 ·
Web应用

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

在过去一年里,我从零开头开发一直在本人的第多少个首要的 Web
应用程序。此次经历教会了自笔者许多在此以前不知情的事物,尤其在平安定祥和用户体验方面。

自个儿最后二遍尝试开发丰盛复杂的应用是在 二〇〇五年,所以就自个儿的立足点的话,有无数事物必要补充。

除此而外笔者所知所见外,要记住本文清单里的内容。因为在支付 Web
应用时,尤其是刚起初做的时候,简单忘记一些重点的政工。

本条检查清单并不是八面玲珑,倘使你是二个经验丰裕的开发者,那里恐怕没有让您感到惊喜的事物,但自个儿梦想能印证它是促进让您想起起一些失去的事物。

图片 1

安全性

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

地点管理:当存款和储蓄密码时,首先对它们举办加盐和散列操作,然后再用以往周边选拔的
crypto 库。假使你不这么做的话,把地点管理转由给 Twitter(Instagram) / GitHub /
 Instagram / 等,用 OAuth 就能完毕。

加密:全部证件难题,还有何样比 SSL
更好。使用它吗。还是能够运用 HSTS

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

壹 、整理遗物:把无关重要的总想着将来可能会用到的事物丢掉,缺点和失误了几颗水钻的发卡,不再行路的时钟,要是没有特别珍藏的意思,就丢了呢,就算再昂贵的标价,也失去了动用价值。

工程:动画

不无的爱,都是高雅的。但别为运用里的有所因素添加动画。因为大部分 CSS
动画都会触宣布局重绘;最棒尽恐怕地范围本人使用 transform 和 opacity。

幸免举办缓慢的连接运算,要是非要使用,那么有限支撑它是对准某个属性的(如,”transition:
opacity 250ms ease-in” ,而不是 “transition: all 250ms ease-in”)。

二 、收拾壁柜:壁柜总是最隐私和紊乱的地方,压在产业的行装,不再喜欢了的送给需求的人,过于陈旧的就剪开擦地板。

用户体验(UX)

表单:当提交1个表单后,用户应接受提交后的申报。假使提交后不向用户发送1个见仁见智的页面,那么就应当有弹框或
alert 一些消息,以便让用户通晓这一次提交是或不是中标。

登录重定向:若是用户打算在您的网站打开二个页面,但并不曾登录,那么他们应该首先接受到三个能登录的页面,并在签到后重定向到八个他们本来想打开的三个页面(当然,前提是已获得授权)。

只要他们品尝登录,但提供了二个不当的密码,那时,用户有大概是忘记了密码,那我们就应当提供三个视觉线索来提醒他们,要有一个重置密码的选项。

三 、随手记帐:庸庸碌碌,不精通哪些度过了一每一天,不精晓手里的money如何悄悄的不见,那就记录下来,不是自个儿苛责,而是一种清晰脉络,是什么把它们成本在了自个儿所必不可少和而热爱的东西上。

电子邮件

订阅设置:任何发送到用户的 email
,都应当至少含有贰个链接,能链接到修改他们的邮箱设置的应用程序页面,并且最佳各样邮件都有三个独立的链接,能收回订阅。

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

四 、背单词:总是有想学一门语言的心绪,但长久的进程令人在始发就慌张,背单词枯燥而世俗,早先与坚韧不拔都很难,可是既然闲着也优伤发慌,不比试试吧。

移动端

就算你不用支付移动端…但不管您是还是不是做,你都应有保障那是2个积极的支配,因为那会对您的应用程序设计和工程有实质性影响。

上边包车型地铁注意事项是一旦你已摘取移动端作为你的平台之一。小编正好选取 Grunt
作为笔者的创设筑工程具,所以笔者得利用一些 Grunt-specific
插件,但你或许行使类似的 JavaScript 塑造筑工程具。

⑤ 、养植物:植物是平静的陪同,有细小裂纹渗水而无法再选拔的水杯,用来随手撒一把种子吗,喜欢一种祥和积累的意义感,天天长出的一片新叶,都以轻飘浅浅呼吸啊。

工程

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

六 、记点有意思的事物:刷尽了博客园、空间、朋友圈又光血虚度的时候,把遇见的在前方发亮的事物用笔记下来吗,想变成一个妙趣横生的人,用笔记录这些让投机感动的欢笑的有感触的,当遇见有趣的人,再说给他俩听,终归,三个会讲典故的人是多么使人陶醉啊。

用户界面(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,从而减弱文件大小。由此,有2个工具为此而生 –
下边提及到的 uglify,即便它会使 JS
代码完全看不懂,但巨大地减小文件大小。

捌 、好好搭配现有的衣裳:天猫逛了1个又二个时辰,还是索然无味头昏脑涨的密闭Taobao界面,总认为衣橱里还差一件衣饰,既然那么累,不比想一想所拥有的最佳的衬托。

用户体验:表单

那是一个很好的建议:保持表单和劳作流程的简易性,当您针对移动设备作为安排平台时,这一点越来越重点。因为尚未人乐意在手提式有线电话机上填满
5 页的表单。


本身期望那列表对于刚(Yu-Gang)开始开发第一个款式 Web
应用的您有所援助,甚至对那么些从前不熟知前端的一些优化技术的后端或设计师。就算你有别的提议或记起有个别事物,那么请让自家驾驭,笔者会考虑将它添加到该列表。

感谢 Chris Dean (@ctdean),Danny King
(@dannykingme) 和 Allen Rohner
(@arohner),他们不光审阅本文的文稿,而且添加了提出。

打赏援助本人翻译越来越多好小说,多谢!


打赏译者

九 、发呆:没事就发发呆吧,记忆也好,幻想也好,它连接下意识的在向和睦询问真正的所求,安静的和协调相处一会,听一听大家团结。有个别工作是不可能告诉旁人的,有个别工作是不用告诉外人的,有个别业务事情是根本不可能告诉外人的,而且有个别工作是,尽管告知了外人,

打赏扶助本人翻译愈来愈多好作品,多谢!

任选一种支付方式

图片 2
图片 3

1 赞 1 收藏
评论

⑩ 、过去的真情实意收藏好啊,纵然那时的山再青、水再绿、那风再温柔,也是已经了,太深的眷恋正是束缚,绊住的不单是未来,还有现在。

至于小编:刘健超-J.c

图片 4

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

图片 5

相关文章

发表评论

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

网站地图xml地图