您当前的位置:首页 > 电脑百科 > 软件技术 > PS/设计

2020年Web Apps用户界面发展趋势:组件统治一切

时间:2021-01-05 10:04:57  来源:  作者:

今天我在谈论Web应用程序UI开发。正如我们在UI框架开发历史中所看到的那样,我们已经从服务器端UI开发转移到了客户端或浏览器端UI开发。显然,Web浏览器代表了当今许多台式机的本机应用程序。使用ElectronJS,您可以将任何可用操作系统的Web应用程序交付到桌面。Web应用程序ElectronJS应用程序独立于平台。这就是我所谓的Web浏览器平台(WbaaP)。但是,到2020年,我们如何在本机Web浏览器应用程序中进行开发?

2020年Web Apps用户界面发展趋势:组件统治一切

 

Web应用程序设计趋势

下列Web框架在2020年大受欢迎:Vue.js,React和Angular。所有基于浏览器的应用程序均使用JAVAScript作为其编程语言。在Web浏览器世界中,JavaScript仍然是主要的功能,因为Web API是基于JavaScript的。尽管今天我们有了所谓的编译器,它们可以将一个源代码(例如Java)转换为另一源代码(例如JavaScript)。可以在此处找到JavaScript的编译器的完整列表。

Vue.js

Vue.js在2020年备受青睐,因为它应该是轻量级的。您可以在当前的Web应用程序中轻松使用Vue.js,并随需添加增量功能。向您的Web应用程序中添加一个小的渐进式升级非常容易,但是如果要使用Vue.js编写整个Web应用程序,则需要了解基本知识。模块化和组件化是您之前需要学习的一些概念。您如何在Vue.js版本3中设计Web应用程序?您仍将构建html文件作为主UI文件。如果您需要一个漂亮的UI,则还需要一个css文件。然后,您可以使用JavaScript构建具有属性/数据,行为/方法和事件的组件。可以将组件插入HTML文件中以构建完整的Web应用程序。在下面,您看到组件插入了两次到index.html文件中。

2020年Web Apps用户界面发展趋势:组件统治一切

> HTML, JavaScript and Preview in the Browser

通过这种机制,您可以构建可以包装其他组件的复合/嵌套组件。

如果您来自SwiftUI开发,您将问自己为什么只为了构建一个简单的Web应用程序UI就需要三个文件(用于主屏幕的HTML,用于UI设计的CSS和用于组件的JS)。为了简化起见,Vue.js具有以下原则:

在组件内部,其模板,逻辑和样式固有地耦合在一起,并且将它们搭配在一起实际上使组件更具凝聚力和可维护性-Vue.js关注点分离。

进一步的步骤是所谓的单一文件组件(SFC)。在这种情况下,可以在一个.vue文件中定义组件。在SFC中,您可以将模板的Look&Feel范围限制为仅将此组件以及该组件的属性/行为限制在一个.vue文件中,就像我们从面向对象的UI设计中已经知道的那样。

2020年Web Apps用户界面发展趋势:组件统治一切

> Vue.js SFC: Hello.vue (Source: Vue.js Doc)

React

React是一个著名的UI框架,不仅适用于Facebook的Web应用程序。实际上,React的想法与Vue.js非常相似,因为您还构建了能够构建Web应用程序的组件。React具有JSX(Java脚本扩展)的特色,描述了UI的外观。这是一个使用JSX的简单React组件。元素id hello-example只是主HTML文件中的一个简单<div id =" hello-example"> </ div>,因此HelloMessage组件将通过上述简单div注入到主HTML文件中。

2020年Web Apps用户界面发展趋势:组件统治一切

> HelloMessage React Component with JSX (Source: React Doc)

无需详细说明,具有声明性UI,组件/组合和单个文件组件的React概念与Vue.js非常相似。可以在此处找到Vue.js和React之间的全面比较。您需要意识到的一件事:像React with JSX这样的JavaScript UI框架在开发期间需要构建工具,编译器,生成器和服务器进程。因此,仅编辑JS文件并重新加载浏览器以进行Web应用程序开发的时间已经结束。

Angular

Angular在将其编程语言从JavaScript迁移到TypeScript时经历了巨大的修改。Angular拥有非常清晰的介绍过程,其中包含所有必需的工具。如果您不想自己选择所有工具,那么Angular可能是全面开发Web应用程序的最佳选择。但是,如果您只需要在当前网页中添加简单的扩展名,Angular可能不适合您。但是,我们如何在Angular中开发UI?

作为Java开发人员,我觉得Angular UI开发与google的所有基于Java的UI框架非常相似,例如:Android和GWT。Angular还使用诸如依赖注入,服务模式和模拟测试之类的已知设计模式。

在Angular中,您还可以构建由属性,行为和模板组成的组件,就像在Vue.js和React中一样。此外,您还有"服务",其中包含可以从应用程序其他部分获得的数据。在Heroes示例中,您可以看到如何构建Heroes组件。

2020年Web Apps用户界面发展趋势:组件统治一切

> Heroes Web App with Angular (Source: Stackblitz)

可以在此处阅读对这三个UI框架的全面综合比较。在这里可以找到有关Angular和React组件的很好的并排说明。

下一站:Java Web"浏览器"应用程序

看完这三个框架:Vue.js,React和Angular之后,我们可以总结以下几点:

· Web应用程序开发的工具链:Web浏览器的UI开发已从无工具链转变为复杂的工具链。您需要运行时进程(Node.js),构建/包管理器(npm),编译器(JSX,TypeScript,babel),webpack等,才能为浏览器开发简单但合理的应用程序。

· 声明式和基于组件的UI开发:我们仍将HTML和CSS用于UI设计,对此没有任何更改。React,Angular和Vue.js使用声明式而不是命令式渲染。此外,它们都支持组件/组合开发,因此您可以在Web应用程序中重用这些组件。趋势还在于能够将组件的属性/属性,逻辑/方法/行为/事件,数据和模板放在单个单元(JavaScript文件)中。在面向对象中,这称为封装。

· 编程语言:所有框架都支持TypeScript,但是在所有示例中,只有Angular专门使用TypeScript。

· 基于UI的DSL(特定域语言)和基于文本的GUI设计器:基于UI的DSL开发仅由React with JSX使用。Angular和Vue.js使用HTML作为标准,UI没有DSL。如果基于GUI设计器的开发,则所有框架都将使用文本。

· 数据绑定的两种方法:ngModel的Angular和v模型的Vue.js直接提供两种数据绑定,因此数据字段中的更新将同步到绑定到该字段的所有UI组件,反之亦然。React没有直接提供此功能。

· UI外观:Web应用程序的L&F仍使用CSS来实现。与具有Apple L&F的SwiftUI或具有Material Design L&F的Android设备相比,您无需担心L&F,因为它直接集成到框架中。您可以定义自己的L&F或使用Web主题,例如Bootstrap或Material Design。

在下一篇文章中,我将介绍如何使用GWT / J2CL用Java开发Web应用程序UI。2020年/ 2021年的情况如何?它与我们在本文中看到的三个框架具有可比性吗?敬请关注!

迄今为止,我最好的组件和UI开发经验是使用Borland(现为Embarcadero)Delphi和VCL(可视组件库)。为什么?两点:

(1)一切都是可视的:所有组件都是可视的。不管是逻辑组件还是数据库组件,它们都是可视组件。作为组件的用户,您始终可以直观地对其进行配置。

(2)可以在开发/设计时激活组件:可以在开发时激活组件,有时可以使用模拟数据激活。这意味着您作为组件的用户,无需编译整个应用程序并运行它,只需查看组件在运行时的工作方式即可。您现在可以在SwiftUI和Android Jetpack Compose中找到这种机制。

(本文由闻数起舞翻译自Aakash Garg的文章《Web Apps UI Development Trend in 2020: Components to Rule Them All》,转载请注明出处,原文链接:https://medium.com/swlh/web-apps-ui-development-trend-in-2020-components-to-rule-them-all-a9e2cb32d27)



Tags:App   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
这是很久以前的一则数据,我在iOS平台开发了“先知 - 优质生活”App,本想依靠封闭式环境,广告少体验不错等优点。会有一定的下载量,没想到开发完成后,就被App store埋藏起来了。个...【详细内容】
2021-12-27  Tags: App  点击:(1)  评论:(0)  加入收藏
  1、明确产品的需求分析+功能  这是最基本的也是第一步,我们要明确自己或者客户真的想要开发一款app应用,其次就要了解到底要开发什么功能什么类别和种类的app应用。所...【详细内容】
2021-12-27  Tags: App  点击:(0)  评论:(0)  加入收藏
应用锁一直是苹果用户的痛点,毕竟这功能隔壁安卓早就有了。 为什么苹果一直不给上应用锁的功能呢?之前记者也有提问过苹果的前设计师(首席声优)艾维,他说在苹果的逻辑里,手机密码...【详细内容】
2021-12-23  Tags: App  点击:(20)  评论:(0)  加入收藏
APP已经成了每个现代人生活里必不可少的东西了吧。 你有没有数过,你一天从睁眼到闭眼,要打开多少个APP? 小沫今天来分享几个我受益颇多的好APP! 直接上图,这9个。 简单归类了一...【详细内容】
2021-12-21  Tags: App  点击:(6)  评论:(0)  加入收藏
据央视新闻客户端消息,中国消费者协会今天(14日)发布《50款APP账号注销及自动化推荐退订测评报告》显示,在是否可以顺利注销APP账号方面,50款APP中有20款APP存在不同程度问题,占总...【详细内容】
2021-12-15  Tags: App  点击:(7)  评论:(0)  加入收藏
“经常听到周围的人跟我说,和朋友聚会时刚谈到一个商品,不久后在手机中就出现了该商品的广告;还有人跟我反映,在用平台类App如打车软件、电商购物App、酒店App时,同样的路线、同样的商品、同样的酒店,不同的手机会显示出不...【详细内容】
2021-12-14  Tags: App  点击:(9)  评论:(0)  加入收藏
来源:人民网电子驾驶证申领失败、身份证信息被占用&hellip;&hellip;随着电子驾驶证的全国推行,一些“交管12123”APP使用过程中遇到的问题也困扰着部分用户。人民网选取了九个...【详细内容】
2021-12-14  Tags: App  点击:(10)  评论:(0)  加入收藏
一些用户可能会遇到这样的问题:当需要使用 Apple ID 时,才发现自己忘记了 Apple ID 的密码。如何快速找回 Apple ID 的密码?苹果官方提供了一个非常简单的方法:如果你现在手上有...【详细内容】
2021-12-14  Tags: App  点击:(10)  评论:(0)  加入收藏
今天详解一个 Python 库 Streamlit,它可以为机器学习和数据分析构建 web app。它的优势是入门容易、纯 Python 编码、开发效率高、UI精美。 上图是用 Streamlit 构建自动驾驶...【详细内容】
2021-12-09  Tags: App  点击:(22)  评论:(0)  加入收藏
公众号:白帽子左一 领取配套练手靶场、安全全套课程及工具...前言在日常渗透项目中,app渗透可以说是家常便饭了。但由于安卓7以后不信任用户安装的证书,很多时候无法正常抓取数...【详细内容】
2021-12-07  Tags: App  点击:(31)  评论:(0)  加入收藏
▌简易百科推荐
【简介】大家好,我是不二何(68ID:何旭阳),很荣幸受邀此次的68Design专访! 目前我是一位自由设计师,平时除了承接一些商业项目之外,也会更新视频号、小红书等短视频平台。其中小红书...【详细内容】
2021-12-27  68Design    Tags:PS   点击:(0)  评论:(0)  加入收藏
Retouch Pro是一款优秀的图像修饰插件,帮助ps用户更快地进行图像照片的修饰。 由于其强大的人工智能系统,您可以轻松就获得专业的效果,并且比以往的手动更快,效果更好,操作更简单...【详细内容】
2021-12-27  设计师臭豆腐    Tags:Ps   点击:(4)  评论:(0)  加入收藏
早在 2015 年,就有报道称,到 2022 年底,仅英国的创意产业就需要 120 万名新工人。当然,世界与 2015 年的情况大不相同&mdash;&mdash;但如果任何事物都需要比预期更多的创造力,而...【详细内容】
2021-12-22  Adobe国际认证    Tags:Adobe   点击:(10)  评论:(0)  加入收藏
最终效果 1、新建文件打开PS软件,按Ctrl + N 新建文件,尺寸为1920&times;1308像素,分辨率为72像素/英寸,如下图,然后确定。 2、导入房间素材打开素材包中的房间素材,用移动工具...【详细内容】
2021-12-22  PS教程240PS    Tags:PS   点击:(5)  评论:(0)  加入收藏
经常和大家分享PPT技巧,不知道大家有没有进步?今天直接来个重磅分享。你知道,一些大厂的路演、发布会PPT的设计师,平时浏览什么设计网站吗? 作为PPT设计师,平时也会看一些创意设计...【详细内容】
2021-12-15  旁门左道PPT    Tags:设计师   点击:(19)  评论:(0)  加入收藏
今天来说使用CAD梦想画图软件绘制一个CAD小白基础题。操作工具操作系统:Windows10CAD软件:CAD梦想画图步骤1.先画一个半径为100的圆,如下图所示:画圆 2.接着使用多边形命令(POL)画...【详细内容】
2021-12-15  CAD梦想画图    Tags:CAD   点击:(16)  评论:(0)  加入收藏
详情页是消费者进店后决定是否购买产品的页面,是电商产品重要的落地点。在消费者找到自己心仪的产品后,详情页满足了消费者了解产品的所有信息的诉求,就像一个经验丰富的售货员,对产品的每细节娓娓道来。定义好产品属性后...【详细内容】
2021-12-15  设计智造    Tags:详情页   点击:(8)  评论:(0)  加入收藏
来源:微信公众号 PingMianDesigner(平面设计) ▲音乐学校创意 ▲轮胎创意 ▲啤酒创意 ▲糕点创意 ▲旅游公司创意 ▲抵制家庭暴力公益宣传 ▲食品创意 ...【详细内容】
2021-12-15  设计智造    Tags:广告设计   点击:(10)  评论:(0)  加入收藏
来源:微信公众号 PingMianDesigner(平面设计)启动画面是在APP启动时全屏展示的简单占位图,其作用是用户打开APP,程序在运行时可能因为网络、程序本身等原因需要加载几秒钟的等待...【详细内容】
2021-12-15  设计智造    Tags:界面设计   点击:(20)  评论:(0)  加入收藏
Don Tuch 是一家位于墨西哥城的快餐店。其源自于Yucat&aacute;n半岛的美食传统,是以一种令人难忘的独特方式融合了正宗风味的食品概念。Don Tuch以一种有趣和轻松的方式向Yuc...【详细内容】
2021-12-15  致美设计    Tags:包装设计   点击:(11)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条