>

开发一个,应用要知道的那些事

- 编辑:至尊游戏网站 -

开发一个,应用要知道的那些事

做 Web 应用要知道的那个事

2015/07/21 · HTML5 · Web应用

本文由 伯乐在线 - 刘健超-J.c 翻译,黄利民 校稿。未经许可,禁绝转发!
塞尔维亚(Република Србија)语出处:blog.venanti.us。招待参预翻译组。

在过去一年里,作者从零先河开采一向在自家的第七个举足轻重的 Web 应用程序。此番经历教会了自个儿不菲事先不理解的东西,特别在安全和顾客体验方面。

自个儿最后二遍尝试开垦充足复杂的选择是在 2005年,所以就自个儿的立场的话,有为数不菲事物须求补给。

除开本人所知所见外,要切记本文清单里的内容。因为在付出 Web 应用时,尤其是刚发轫做的时候,轻松忘记一些重大的事体。

本条检查清单实际不是面面俱圆,假诺你是一个经验丰硕的开荒者,这里恐怕未有让您倍感欣喜的事物,但自个儿希望能表明它是推动让您想起起一些失去的事物。

付出四个 Web App 必需掌握的那多个事,app那多少个事

  在过去的一年里,我在从头开首开辟自身的率先个主要的Web应用。经验教会了不菲在先不领会的事物,非常是在安全性和顾客体验方面。

  值得说的是,小编上一遍尝试营造的任何合理复杂性是在二零零六年。所以,在安全防范方面,作者还应该有繁多东西需求去填补。

  就算在那二个本身一度精晓或已经遭受过的事物之外,下边那些清单的内部原因在付出Web应用时也特别轻易忘记,越发是你才刚好启航的时候。

  那个清单也许在好几方面不尽详细,借让你是壹人经验丰富的开荒者,小编可疑这里将不会有何样事物会让你倍感讶异。不过,笔者愿意它对那三个恐怕屏弃了某一件事物的人有帮衬。

安全性

肯定邮件:当顾客注册时,应向他们发送带有一点点击确认邮箱的链接的邮件。假如客商更新他们的邮箱地址,则要重新重复这几个专门的职业流程。

位置管理:当存款和储蓄密码时,首先对它们实行加盐和散列操作,然后再用明日天津大学学面积利用的 crypto 库。假诺您不这么做的话,把地点管理转由给 照片墙 / GitHub /  推特 / 等,用 OAuth 就能够到位。

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

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

 安全性

  确认电子邮件:当客户注册时,你应有发三个含有确认链接的电子邮寄给他们,然后客户必需点击链接来确认。假诺顾客在有些时候改换他们的电子邮箱地址,应该接触一样的操作流程。

  身份管理:在存款和储蓄密码时,先用布满选择的加密库将密码加密。若是您能不管理密码,那么身份管理转由照片墙/Github/推文(Tweet)来管理,只要利用三个认证接口。

  加密:对Web的具有证件难题,未有比SSL越来越好的手艺了,使用它呢,大概使用 HSTS 也足以。

  证书:恒久不要Check任何款式的服务器证书(API密钥、数据块密码)到源码调整库中。

图片 1

工程:动画

享有的爱,都是尊贵的。但别为运用里的富有因素增添动画。因为好多 CSS 动画都会接触布局重绘;最棒尽大概地范围本中国人民银行使 transform 和 opacity。

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

 工程:动画

  对于那总体是一清二白的爱,别将你的app上有所的成分都做成动画,因为超过八分之四CSS动画都会触发表局重绘。你最佳限制一下,尽可能用转变和 opacity。

  制止懒过渡计算,借令你势需要动用它,必得保险使用一定的质量(如:”transition: opacity 250ms ease-in” 并不是 “transition: all 250ms ease-in”)。

客商体验(UX)

表单:当提交三个表单后,客商接待受提交后的报告。假使提交后不向客商发送四个两样的页面,那么就活该有弹框或 alert 一些新闻,以便让客户明白此番提交是不是中标。

报到重定向:要是客户筹划在您的网址展开一个页面,但并未登入,那么他们应有率先接受到贰个能登陆的页面,并在登入后重定向到三个他们原来想张开的三个页面(当然,前提是已获取授权)。

如果她们品尝登入,但提供了多少个谬误的密码,那时,客商有一点都不小大概是忘记了密码,那大家就活该提供多个视觉线索来唤醒他们,要有三个重新初始化密码的选项。

 客户体验

  表单:当提交表单时,客户应该获得部分关于提交的上报音讯。若是提交后页面没跳转到其余页面,那么就应该有贰个弹出类型的唤醒来让客户知道她们是交给成功了照旧退步了。

  登入重定向:假如叁个客商正想访问你网站上的有个别页面,不过他从没登入,那么顾客应该首先被导向登录页面,客商登录之后又会跳转到他在此以前试着去拜见的页面。 倘若他们在登录时输入了错误的密码,应该予以提醒,提醒他们一旦忘记密码了能够挑选重新安装新密。

电子邮件

订阅设置:任何发送到客商的 email ,都应有最少含有三个链接,能链接到修改他们的邮箱设置的应用程序页面,况且最棒每个邮件都有一个独门的链接,能收回订阅。

千万别让顾客为了撤废订阅而向你发送邮件。

 电子邮件

  订阅设置:你发送给各种客商的邮件,起码要含有一个链接到您的利用的一个页面,在这里个页面上客商能够修改他们的邮箱设置;还应该二个单身链接供客商来打消订阅。 别让她们发邮件给您来撤消订阅。

移动端

虽说您不要支付移动端…但不管你是或不是做,你都应当保障这是三个主动的支配,因为这会对你的应用程序设计和工程有实质性影响。

上边包车型大巴注意事项是借令你已选拔移动端作为你的阳台之一。小编正要采用 Grunt 作为自个儿的营造筑工程具,所以本人得使用部分 Grunt-specific 插件,但您恐怕选拔类似的 JavaScript 营造筑工程具。

 移动端

  你并不必须要为你的利用开垦活动客商端。不过,开辟或不开采,你必得询问它是贰个要命重要的调控。因为那将对开荒你的行使的设计员和程序猿爆发第一影响。

  以下假定你已经挑选某一定移动端作为你的平台之一。笔者刚刚使用了Grunt来作为自个儿的构建筑工程具,所以,我早已具备一点点有关Grunt的插件能够用。不过,大概存在部分与您正在利用的JavaScript工具类似的东西。

工程

单页面应用:到现在单页面(SPA)是王道。它的基本点优势是相当少加载整个页面 – 只需加载所需资源,并且毫不反复重载同样的财富。若是你才刚刚早先开辟三个新的 web 应用,那它相当的大概是 SPA。

 工程

  单页面应用:近日单页面应用(SPA)是主流,它的重大优势:SPA只供给更加少的加载,只供给加载你所急需的财富,况且无需重新二遍又叁遍的加载。倘诺你刚刚盘算做三个新的web应用,你应该接纳SPA。

顾客分界面(UI)

分辨率:当您付出 MVP (Minimum Viable Product –最简化可实践产品)时,不用先急着极度种种尺寸的 UI ,这是等您的制品一下子火了后头才须要去做的事体,但要确定保障支持主流设备(尺寸)。

 顾客分界面

  分辨率:在您付出你的MVP时,你恐怕无需确定保障您的UI能够在具备设施上高雅地工作,可是,但你应当保障它能适用于手提式有线电话机和机械Computer分辨率的骨干范围。

UX:带宽

对峙于桌面端,移动端的三个大核心是带宽,它是拾贰分谈何轻松的财富。因而,不应当放过任何能减弱央浼的时机,让它们尽恐怕地运用异步央求,并压缩乞求能源的大小。

JS & CSS – 合併与收缩:把面向具体接纳的 JavaScript 和 CSS  合并到独门文件里(一个 JS,七个CSS),并举办压缩。Grunt-contrib-concat、Grunt-contrib-cssmin 和 Grunt-contrib-uglify 都以您的好相恋的人。

具备财富 – 使用 CDN:它有多个第一的优势。第二个是适用托管全部能源,并本地化。CDN 确定保障能源服务都位居二个区域,而该区域在地理地方上是将近客商诉求能源的职责,进而减少加载时间。

第2个优势是更适用于你的依附文件(比方,非面向特定应用的体制和 JS 代码)。为你所依附的文书使用 CDN 能大幅地收缩加载时间。譬如,非常多网站信任 Angular.js,使用 CDN 链接 Angular 代码会触发缓存命中,那么移动道具会从设备缓存里搜寻,而不是分外新建三个HTTP 央求。

CSS – 减弱占用空间:大许多开荒者在开首时阶段,很恐怕使用一些 UI 框架(如 Bootstrap、Foundation 等)。这么些框架能够异常的大,其压缩版日常能够常用的 CDN 上获得,但你不太可能使用它包蕴的保有样式。因而,类似 uncss 工具(通常配成对的有 processhtml)能让你思疑地移除最后未被利用的体制。

小心那点相当重大:uncss 深入分析器无法领取动态样式(即经过 JavaScript 事件加多的样式),所以你必须在浏览器举行严加的测试,以管教不会去除应用程序实际选拔的样式。

CSS – 将入眼的文件放在头顶:因为样式供给在行使达成加载前观察;次要的体裁能在加载完后提供。

JS – 收缩占用空间:因为运用一旦上线,技术员就没有要求想念 JavaScript 代码里内部变量的可读性,因而得以将具有如 user.name 变量重命名字为 u.e,进而减少文件大小。由此,有叁个工具为此而生 – 上边谈到到的 uglify,固然它会使 JS 代码完全看不懂,但巨大地减小文件大小。

 客户体验:带宽

  移动端的带宽比台式电脑的带宽尤其谭何轻便,那也是移动使用的第一次全国代表大会话题。由此,你应当寻找一切机遇来减弱央求的多少,尽只怕选取异步,减小被呼吁财富的分寸。

  JS与CSS:你应有讲应用上一定的JavaScript和CSS聚焦停放一个文件中(三个存JS、三个存CSS),并尽可能压缩它们的大大小小。你的意中人在此边 Grunt-contrib-concat , Grunt-contrib-cssmin 和  Grunt-contrib-uglify 。

  为持有能源–使用CDN:使用CDN主要有三个平价。第多少个适用于具备托管的财富便是定位,CDN能够有限支撑您的财富在有个别区域,然后顾客访谈的时候能够就近访谈能源,那样减弱了财富加载时间。

  第四个是利用于你的Web应用的信赖性文件(举例:非特定于应用的体裁和JS代码)。对web应用所依附的文件使用CDN,可通过顾客的缓存来相当大地减小加载时间。比方,比非常多网址都重视Angular.js,使用CDN来链接到宗旨角代码将会触发贰个缓存命中,移动器具客户将会从缓存中接收它,并非倡议另贰个HTTP伏乞。

  CSS-减小本子大小:大多数开垦者刚初步的时候大概会使用某种UI框架(如Bootstrap、Foundation等)。那么些框架恐怕特别大,常常在大部CDN上都可用它们的精简版样式,你也不容许要求运用它们所含有的万事样式。日常,像类似 uncss 的工具(常常与类似 processhtml 的工具搭配)在帮您移除那多少个用不着的体裁有狐疑的意义。

  须要侧重的是,uncss解析器无法分析动态样式。所以您在检验的时候,必得心里还是惊惶,确认保障别删错了那几个实在被利用在你的应用中的样式。

  CSS-将重大的代码放置到head:在行使加载完在此以前,关键样式应该已经可用,它们应该放置Head中。次要的体裁可用稍后再加载。

  JS-减小本子大小:由于在您的成品中JavaScript代码无需另外内部变量对大家易驾驭,将变量user.email重命名称叫u.e只怕会推向减小你的剧本文件。幸运的是,有个工具得以帮您做这一个工作-前边提到的 uglify ,它能够将你的JS代码变得难以读懂,但是JS文件会更加小。

客商体验:表单

那是叁个很好的建议:保持表单和做事流程的简易性,当你针对移动设备作为布置平台时,那一点更加的入眼。因为尚未人乐意在手提式有线电话机上填满 5 页的表单。


本身盼望这列表对于刚同志发轫支付首款 Web 应用的您有所帮忙,乃至对那多少个从前面生前端的一对优化本领的后端或设计员。固然您有任何提出或记起有个别事物,那么请让本人明白,小编会思量将它加多到该列表。

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

打赏支持本身翻译越多好文章,多谢!

打赏译者

 客商体验:表单

  确认保障您的表单和做事流程省略,总体上来讲那是多个很好的提出。假如您还甄选了针对性移动端实行布局,那么那一点进一步关键,未有人甘愿在她们的无绳电话机上填入具有5个页面包车型大巴表单。

  作者梦想那个列表能够对那个正盘算开辟你的第三个web app、或是那多个已经先导在付出、或对前面两个设计优化本领并不熟稔的心上人有助于。倘令你动手开拓从此发掘了一些任何被废弃的本事或本领,请记下来并告诉自身,我会思量把它增添在此个列表中。

  如若你也爱怜那篇文章,或认为它对您有扶助,请分享到社区,让越多的相爱的人收益于它吧!

  由技师的资料库–小柯同学翻译,有翻译不得法的地点,请扶持校勘,谢谢帮衬。

  朝鲜语原版的书文: Things to Know When Making a Web Application in 二〇一四 翻译:codecloud.net

Web App 必须精晓的那多少个事,app那个事 在过去的一年里,笔者在从头开头开垦本身的第贰个重大的Web应用。经验教会了相当多从前不明白的...

打赏帮忙作者翻译越来越多好小说,感谢!

任选一种支付情势

图片 2 图片 3

1 赞 1 收藏 评论

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

图片 4

前端,在路上... 个人主页 · 作者的小说 · 19 ·     

图片 5

本文由软件综合发布,转载请注明来源:开发一个,应用要知道的那些事