菜单

做 Web 应用要掌握的那几个事

2019年3月25日 - Bootstrap

做 Web 应用要理解的那3个事

2015/07/21 · HTML5 ·
Web应用

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

在过去一年里,小编从零最先开发直接在自己的第②个根本的 Web
应用程序。这一次经历教会了自身许多事先不驾驭的事物,尤其在平安定祥和用户体验方面。

自笔者最终2遍尝试开发丰裕复杂的利用是在 二零零七年,所以就自俺的立足点的话,有为数不少东西需求补充。

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

以此检查清单并不是左右逢原,假若您是3个经验丰盛的开发者,那里大概没有让你感觉惊喜的东西,但自身期待能证实它是有助于让你回看起部分错过的东西。

图片 1

安全性

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

地点管理:当存款和储蓄密码时,首先对它们举办加盐和散列操作,然后再用后天天津大学学面积选取的
crypto 库。如若你不那样做的话,把地点管理转由给 推特 / GitHub /
 推特(TWTR.US) / 等,用 OAuth 就能不负众望。

加密:全数证件难题,还有怎么着比 SSL
更好。使用它吗。仍可以动用 HSTS

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

壹 、整理遗物:把非亲非故主要的总想着以往恐怕会用到的事物丢掉,缺点和失误了几颗水钻的发卡,不再行路的时钟,假如没有特意珍藏的意义,就丢了啊,尽管再昂贵的价位,也失去了选用价值。

工程:动画

拥有的爱,都以尊贵的。但别为利用里的保有因素添加动画。因为多数 CSS
动画都会接触布局重绘;最佳尽也许地限制本中国人民银行使 transform 和 opacity。

幸免实行缓慢的对接运算,假设非要使用,那么保障它是针对有些属性的(如,”transition:
opacity 250ms ease-in” ,而不是 “transition: all 250ms ease-in”)。

贰 、收拾壁柜:壁柜总是最神秘和混乱的地点,压在产业的衣服,不再喜欢了的送给需求的人,过于陈旧的就剪开擦地板。

用户体验(UX)

表单:当提交一个表单后,用户应收取提交后的反馈。倘若提交后不向用户发送3个区别的页面,那么就应当有弹框或
alert 一些新闻,以便让用户知道这一次提交是或不是中标。

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

万一她们尝尝登录,但提供了三个错误的密码,那时,用户有大概是忘记了密码,那我们就活该提供一个视觉线索来唤醒他们,要有两个重置密码的选项。

叁 、随手记帐:毫无作为,不驾驭怎么着度过了一天天,不精通手里的money如何悄悄的散失,这就记录下来,不是自个儿苛责,而是一种清晰条理,是怎么把它们开销在了我所必备和而热爱的事物上。

电子邮件

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

千万别让用户为了打消订阅而向您发送邮件。

肆 、背单词:总是有想学一门语言的思想,但漫漫的历程令人在早先就慌张,背单词枯燥而世俗,开头与坚持不渝都很难,然而既然闲着也优伤发慌,不比试试吧。

移动端

尽管你不要支付活动端…但不管您是还是不是做,你都应有保险那是八个再接再砺的主宰,因为这会对您的应用程序设计和工程有实质性影响。

上面包车型客车注意事项是一旦你已摘取移动端作为你的平台之一。笔者正好采取 Grunt
作为自个儿的创设筑工程具,所以小编得利用一些 Grunt-specific
插件,但您恐怕使用类似的 JavaScript 构建筑工程具。

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

工程

单页面应用:于今单页面(SPA)是王道。它的重庆大学习成绩优秀势是很少加载整个页面 –
只需加载所需财富,并且不要反复重载相同的能源。若是您才刚刚起初开发1个新的
web 应用,这它很只怕是 SPA。

陆 、记点有意思的东西:刷尽了天涯论坛、空间、朋友圈又光阴虚度的时候,把遇见的在后边发亮的事物用笔记下来呢,想变成1个诙谐的人,用笔记录那么些让本身感动的欢笑的有感触的,当遇见有趣的人,再说给他俩听,毕竟,1个会讲逸事的人是多么动人啊。

用户界面(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
代码会触发缓存命中,那么移动装备会从设备缓存里摸索,而不是外加新建1个HTTP 请求。

CSS – 收缩占用空间:大部分开发者在上鼠时阶段,很恐怕应用一些 UI 框架(如
BootstrapFoundation 等)。那个框架能够十分的大,其压缩版平常能够常用的
CDN 上取得,但您不太或许使用它富含的持有样式。因而,类似
uncss 工具(一般配对的有 processhtml)能令你困惑地移除最后未被应用的样式。

瞩目那一点很重点:uncss 解析器不可能领到动态样式(即透过 JavaScript
事件添加的体裁),所以您无法不在浏览器进行严格的测试,以保障不会删除应用程序实际利用的体裁。

CSS –
将重点的文件放在头顶:因为样式须要在行使完毕加载前来看;次要的体制能在加载完后提供。

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

八 、好好搭配现有的时装:天猫逛了二个又三个钟头,依然索然无味头昏脑涨的关闭天猫界面,总觉得壁柜里还差一件服装,既然那么累,不及想一想所负有的最棒的铺垫。

用户体验:表单

那是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地图