郑州知网文化传播有限公司欢迎您!

开发一个 Web App 必须了解的那些事

作者:创始人 日期:2020-06-12 人气:2762

在过去的一年里,我在从头开始开发我的第一个重要的Web应用。经验教会了很多以前不知道的东西,特别是在安全性和用户体验方面。

值得一提的是,我上一次尝试构建的任何合理复杂性是在2005年。所以,在安全防御方面,我还有很多东西需要去补充。

工程:动画

别将你的app上所有的元素都做成动画,因为大部分CSS动画都会触发布局重绘。你最好限制一下,尽可能用变换和 opacity。

  避免懒过渡计算,如果你一定要使用它,必须确保使用特定的属性(如:”transition: opacity 250ms ease-in” 而不是 “transition: all 250ms ease-in”)。

 用户体验

  表单:当提交表单时,用户应该得到一些有关提交的反馈信息。如果提交后页面没跳转到其它页面,那么就应该有一个弹出类型的提醒来让用户知道他们是提交成功了还是失败了。

  登陆重定向:如果一个用户正想访问你网址上的某个页面,但是他并未登陆,那么用户应该首先被导向登陆页面,用户登陆之后又会跳转到他之前试着去访问的页面。 如果他们在登陆时输入了错误的密码,应该给以提示,提示他们如果忘记密码了可以选择重新设置新密。

 电子邮件

  订阅设置:你发送给每个用户的邮件,至少要包含一个链接到你的应用的一个页面,在这个页面上用户可以修改他们的邮箱设置;还应有一个单独链接供用户来取消订阅。 别让他们发邮件给你来取消订阅。

 移动端

  你并不一定要为你的应用开发移动客户端。但是,开发或不开发,你必须了解它是一个非常重要的决定。因为这将对开发你的应用的设计师和工程师产生重大影响。

  以下假定你已经选择某特定移动端作为您的平台之一。我碰巧使用了Grunt来作为我的构建工具,所以,我已经拥有一些有关Grunt的插件可以用。但是,可能存在一些与你正在使用的JavaScript工具类似的东西。

 工程

  单页面应用:最近单页面应用(SPA)是主流,它的主要优势:SPA只需要更少的加载,只需要加载你所需要的资源,而且不需要重复一遍又一遍的加载。如果你正好准备做一个新的web应用,你应该选用SPA。

 用户界面

  分辨率:在你开发你的MVP时,你可能不需要确保你的UI能够在所有设备上优雅地工作,但是,但你应该确保它能适用于手机和平板电脑分辨率的基本范围。

 用户体验:带宽

  移动端的带宽比台式电脑的带宽更加宝贵,这也是移动应用的一大话题。因此,你应该寻找一切机会来减少请求的数量,尽可能使用异步,减小被请求资源的大小。

  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 app、或是那些已经着手在开发、或对前端设计优化技巧并不熟悉的朋友有帮助。如果你着手开发之后发现了一些其它被遗落的技术或技巧,请记下来并告诉我,我会考虑把它添加在这个列表中。

郑州知网计算机软件有限公司拥有雄厚的技术研发实力,致力于为客户提供完美的原生APP开发解决方案。把握市场动向,深耕APP领域。您的电商大业,由知网软件守护


你觉得这篇文章怎么样?

00

快捷导航

网络推广具体做什么的 互联网营销方案策划 人才招聘 app开发公司哪好 网络营销发展 网站建设网站公司 单品营销策划 网络营销1 软件开发好不 app商城开发公司 研发直销软件开发 分销商城微信开发 双轨直销软件多少钱 直销软件管理系统 农场类游戏开发 网络营销推广实训 郑州直销系统 郑州seo技术 深圳营销策划机构 市场营销策划服务 网络推广公司怎样 b2b软件开发 网站建设公司 企业如何做好网络推广 郑州网络推广价格 带分销的商城 双轨直销软件公司 商城软件开发公司 网络营销与策略 品牌网络营销方案