菜单

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

2019年9月13日 - 银河官方网站
开发一个,应用要知道的那些事

做 Web 应用要知道的那一个事

2015/07/21 · HTML5 ·
Web应用

本文由 伯乐在线 –
刘健超-J.c
翻译,黄利民
校稿。未经许可,禁止转发!
斯洛伐克语出处:blog.venanti.us。款待参预翻译组。

在过去一年里,作者从零开首开辟一向在本身的首个第一的 Web
应用程序。这一次经历教会了笔者非常的多事先不知底的事物,非常在安全和客户体验方面。

自己最终一回尝试开辟丰富复杂的选用是在 2007年,所以就本身的立场的话,有众多东西需求补给。

除却小编所知所见外,要切记本文清单里的内容。因为在付出 Web
应用时,尤其是刚起初做的时候,轻松忘记一些主要的工作。

其一检查清单并非布帆无恙,若是您是贰个经验丰裕的开荒者,这里也许未有让您感觉欣喜的东西,但本人梦想能注解它是推动令你回看起一些错失的东西。

支付二个 Web App 必需理解的那多少个事,app那一个事

  在过去的一年里,小编在从头起先开垦本人的第八个关键的Web应用。经验教会了众多从前不精晓的事物,非常是在安全性和客商体验方面。

  值得说的是,小编上叁次尝试塑造的另外合理复杂性是在二零零七年。所以,在平安全防守卫方面,作者还会有为数相当的多东西要求去填补。

  固然在那多少个本身曾经知晓或早就遭逢过的事物之外,上边这么些清单的细节在付出Web应用时也特别轻便忘记,特别是您才刚好启航的时候。

  那一个清单只怕在一些地方不尽详细,假诺你是一位经验充分的开荒者,笔者猜忌这里将不会有如何东西会令你感觉感叹。不过,小编梦想它对那三个恐怕有失了一部分东西的人有救助。

安全性

确认邮件:当顾客注册时,应向他们发送带有一点击确认邮箱的链接的邮件。若是顾客更新他们的邮箱地址,则要重新重复那些专门的学问流程。

地方管理:当存款和储蓄密码时,首先对它们举办加盐和散列操作,然后再用前几天常见利用的
crypto 库。假使您不这么做的话,把地点管理转由给 推特 / GitHub /
 推文(Tweet) / 等,用 OAuth 就能够成功。

加密:全数证件难题,还也会有何样比 SSL
越来越好。使用它吗。还能运用 HSTS。

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

 安全性

  确认电子邮件:当客商注册时,你应有发几个蕴涵确认链接的电子邮寄给他们,然后顾客必得点击链接来确认。借使客户在某些时候改动她们的电子邮箱地址,应该接触同样的操作流程。

  身份管理:在存款和储蓄密码时,先用分布选拔的加密库将密码加密。要是您能不管理密码,那么身份管理转由推文(Tweet)/Github/Twitter来管理,只要利用二个验证接口。

  加密:对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能够在具有设施上优雅地专业,但是,但您应当保障它能适用于手提式有线电话机和三星GALAXY Tab分辨率的骨干范围。

UX:带宽

相对于桌面端,移动端的一个大宗旨是带宽,它是丰裕宝贵的财富。因而,不该放过任何能压缩伏乞的机缘,让它们尽恐怕地运用异步央求,并压缩诉求财富的高低。

JS & CSS – 合併与削减:把面向具体运用的 JavaScript 和 CSS
 合併到独门文件里(三个 JS,一个CSS),并拓宽削减。Grunt-contrib-concat、Grunt-contrib-cssmin 和 Grunt-contrib-uglify 都以你的好相恋的人。

具备能源 – 使用
CDN:它有七个重大的优势。第叁个是适用托管全数能源,并本地化。CDN
确定保障财富服务都位于贰个区域,而该区域在地理地方上是近乎顾客诉求资源的任务,进而收缩加载时间。

其次个优势是更适用于你的依赖文件(比方,非面向特定应用的体裁和 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
代码完全看不懂,但变得庞大地减小文件大小。

 客户体验:带宽

  移动端的带宽比台式Computer的带宽尤其难得,那也是活动选取的一大话题。由此,你应该搜索一切机缘来压缩乞求的多少,尽大概采用异步,减小被呼吁能源的轻重缓急。

银河官方网站,  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 页的表单。


自己期待那列表对于刚(Yu-Gang)开头支付第一个款式 Web
应用的您具有帮助,乃至对那二个此前不熟悉前端的片段优化本领的后端或设计员。要是您有其余建议或记起有些事物,那么请让自己清楚,笔者会思量将它加多到该列表。

感谢 Chris Dean (@ctdean),Danny King
(@dannykingme) 和 Allen Rohner
(@arohner),他们不光审阅本文的文稿,况兼加多了提议。

打赏支持自身翻译越多好小说,感激!

打赏译者

 顾客体验:表单

  确认保障您的表单和做事流程简便,总体上而言那是贰个很好的建议。假诺你还挑拣了针对性移动端实行配置,那么这或多或少极其入眼,未有人乐意在他们的无绳电话机上填入具有5个页面包车型客车表单。

  作者愿意以此列表能够对那么些正筹划支付你的首先个web app、或是这一个曾经起先在付出、或对后边二个设计优化技能并素不相识的相爱的人有扶持。假设您出手开采从此察觉了有些别样被错过的本领或本领,请记下来并报告笔者,小编会思考把它增添在这一个列表中。

  假如您也欢欣那篇文章,或感到它对您有扶持,请分享到社区,让愈来愈多的相恋的人受益于它呢!

  由程序猿的材质库–小柯同学翻译,有翻译不科学的地点,请扶助校对,多谢帮助。

  立陶宛共和国(Republic of Lithuania)语原著: Things to Know When Making a Web Application in
二〇一四 翻译:codecloud.net

Web App 必得明白的那多少个事,app这几个事
在过去的一年里,笔者在从头伊始开采本人的首先个基本点的Web应用。经验教会了数不清原先不明了的…

打赏协助作者翻译越多好小说,多谢!

任选一种支付办法

银河官方网站 2
银河官方网站 3

1 赞 1 收藏
评论

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

银河官方网站 4

前端,在路上…
个人主页 ·
小编的小说 ·
19 ·
    

银河官方网站 5

相关文章

发表评论

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

网站地图xml地图