前端框架介绍

近年来,前端框架似乎在网络开发领域掀起了一场风暴。任何以网站开发者,设计师,程序员或建筑师,尤其是那些刚开始玩这个游戏的人,甚至更多的人只是把网页设计作为一种爱好而不是全职工作,对这个行业的发展速度了如指掌。跟上新技术发布和旧技术更新的速度是这个行业任何人都面临的最关键和最关键的任务之一。必须承担。几个月不这样做会让我们感觉迷失在信息的海洋中,不能以比技术产出更快的速度消费。一旦失去联系,很难再保持联系。

因此,这将引导我们进入前端框架;可以说是最基本的,然而,网站开发行业在最近几次看到了真正的和技术上有益的发展。(顺便说一下,当我们说“工业”时,我们指的是专业人士和业余爱好者……这是一个罕见的行业,不能区分两者,但我们的就是其中之一)。

什么是前端框架??

你可能知道它们是引导或基础。这是两个最流行的前端框架,但是我们稍后会在这篇博文中讨论更多内容。

前端框架本身并不新鲜。以最基本的形式,它们只是一组预先定义好的CSS类和JavaScript函数,供开发人员快速轻松地使用。有些甚至更基本,去掉了JavaScript,只不过是一个CSS类列表。

多年来,这种为重用而预先定义标记块的技术已经出现,但常常是私下里,不管是一个建立了自己班级的机构,图书馆和职能部门加快生产,或者是一个想更聪明工作的业余爱好者,而不是更难。现在的区别,当然,前端框架已经公开了,成为主流,并成为大众所能接触到的。

私人发展的明显缺点之一,内部框架,首先是腿部的发育。当然,从长远来看,它节省了这些人的时间和精力(毫无疑问,从长远来看,这是值得的),但创建内部框架的最初工作是(而且仍然是,如果您创建了自己的)足够重要,可以将其视为单独的项目流。

公众,主流,可访问的和预先开发的框架,例如由Zurb通过Twitter或基金会引导然而,将这个初始阶段的工作从用户身上带走,并将其放在框架开发人员自己身上。现在框架,一个主要是私人开发的概念,以加快内部开发,帮助Web开发人员变得更加高效,这要归功于一群友好的人,他们的角色是为我们这些人开发框架,不仅没有时间从头开始编写所有标记(第一个问题)。但时间也太紧张了,我们甚至无法编写自己的框架来解决第一个问题。聪明的,而且非常有用!!

为什么要使用前端框架??

框架

前端框架有很多好处,主要致力于帮助开发人员在所有前端Web开发项目的标记开发阶段加快生产并减少错误。

速度和简单性

前端框架的主要目标始终是加快开发人员的生产,降低成本,提高产量,在保持简单的同时,对于最初学的Web开发人员来说,简洁明了。每一个好的前端框架都能实现这个目标,允许那些不熟悉标记的人以最小的工作量快速地获取和学习定义的类和函数。

没有什么比管理一个你没有开发的网站和不得不花费数天的时间更令人沮丧的了,或者可能是几周,熟悉以前的开发人员标记。我们都有独特的笔迹,和HTML,CSS和JavaScript标记相同。每个Web开发人员都有自己独特的签名;他们自己构建标记的方式和自己的常见错误修复方法。一个共同的,公共框架立即解决了这个问题,因为结构和标记签名不是由最终用户定义的,但是框架开发人员,被全世界认可。

我可以走进任何公司,任何业余爱好者的办公室,任何机构,只要他们使用本文所列的框架之一,我能认出,理解,重要的是,在几分钟内就可以轻松地完成标记。这就是由一个共同的结构和一组共同的规则支持的共同语言的好处,以实现共同的目标。没有框架,或者有了内部开发的框架,这种好处不存在。相反,开发人员在他们从过去的个人承担的任何项目的头几天或几周内,一直在尝试熟悉继承的标记。

反应敏捷的,内置跨设备支持

在西方世界,大多数网站的互联网流量来自手持设备的世界里,无论是平板电脑还是智能手机,没有什么借口不为这个市场提供响应性网站。开发一个响应式样式表来针对所有需要的屏幕大小和设备,从零开始就很难掌握。智能手机横向CSS的屏幕分辨率应该是多少?智能手机肖像怎么样?别忘了平板风景和肖像。以及一些电视和智能板上的超大分辨率。以及带有视网膜屏幕的设备。你知道对于所有那些潜在的设备和场景,宽度断点是什么,从而允许你用CSS单独瞄准那些设备和场景吗?你们中的一些人可以。其他很多人不会。

虽然做你的研究和了解是有用的(我强烈推荐)。一想到必须编写样式表模板来针对所有这些场景,我就感到害怕。

不过有好消息。大多数前端框架都是为响应而构建的,对任何设备和任何屏幕分辨率进行适当的扩展和收缩。

例如,在不同的屏幕大小上隐藏和显示不同容器的能力只不过是向您的

.(
要使用Twitter引导隐藏智能手机设备上的DIV,顺便说一下)很简单,向前直走,只要您有一个所有可用类和函数的方便列表(我们稍后将讨论)。它比计算出你需要的屏幕宽度要容易得多,然后写下规则来设置这个DIV显示:无。当然,这种情况仍在幕后发生,但它已经为您编写了,您所需要做的就是用正确的预定义类来确定它的目标。

预先测试的标记

您可以确信,任何优秀的前端框架中包含的标记都已经过测试,并且在签署和交付给您之前已经通过了一套严格的标准,最终用户。常见的和不常见的错误已经被识别出来,评估并解决,在整个项目中只剩下很少的bug修复工作。

决策过程变得容易

在开发网站时,通常最耗时的方面不是编写标记,但是在我们编写代码的时候,就功能做出决定。即使是最好的设计师有时也会让开发人员对元素进行解释,所以决定是否有一个粘头,滑动导航条或粘性的页脚有时会在编码时掉到我们身上。

没有框架,实现其中的一些将是耗时的,而且可能是毫无意义的,我们是否应该在构建并看到它工作之后决定使用不同的方法?有了前端框架,然而,打开诸如滑动导航栏之类的元素,粘性的页眉和页脚以及其他交互元素,以及造型按钮和提供平滑的悬停效果,只需将已定义的类列表添加到标记中的正确元素中即可。现在,创建带有样式化按钮的导航栏,下拉菜单,还有一个粘糊糊的头,是5分钟的工作而不是30分钟以上的工作。

详细的文档和广泛的支持网络

如前所述,当您有文档支持您时,框架非常有用。它是一个没有文档来解释框架结构以及您可以利用的类和函数的无用工具。幸运的是,所有优秀的前端框架都有优秀的文档,大多数都有一个出色的社区支持网络,由框架开发人员和经验丰富的最终用户组成。

前端框架的缺陷

使用框架有很多好处,但也有缺陷。不指出另一个就讨论一个是不对的,因此,下面我们将讨论框架可能带来的一些问题。

定制困难

尽管框架及其在整个标记中的公共结构和规则可以通过多种方式是积极的,,当您尝试使用框架大量定制网站时,同样的好处也可能成为一个缺陷。

框架必须在为您提供随时可用的元素之间找到平衡,同时也不会锁定这些元素的功能和定制能力。有时,找不到这个余额,最后,我们使用的函数和类已经预先为我们设计了样式,并被编程为以特定的方式工作。偏离这一点通常是相当困难的。这给我们带来了下一个缺陷。

网站外观相同的可能性

在定制框架特定元素的斗争中,网站看起来总是一样的。虽然完全可以自定义整个网站和每个单独页面的布局,该页面上的元素可能(也可能)看起来类似于其他网站。例如,引导程序有预先设计好的按钮。虽然可以快速轻松地更改这些颜色以匹配您的网站,开始改变悬停状态要花费更多的时间,动画和渐变效果。框架的大多数最终用户只更改基本样式设置,比如字体和颜色,这会根据默认框架保留其他更微妙的样式。你可能不会太注意到这一点,但我保证,一旦你看到了Bootstrap或基金会风格的按钮,注意到悬停和过渡效果,你将开始在互联网上发现它们。

缺乏对代码的熟悉

虽然使用一个通用框架并能够在检查源代码的几分钟内编辑整个世界的网站是一个很好的优势,一旦开始尝试编辑框架的原始标记,而不仅仅是将系统作为最终用户使用,这变得很棘手。有数百行CSS和数百行JavaScript,全部由框架开发人员编写,您对该代码的熟悉是不存在的,因此,如果您希望编辑框架功能本身,就要非常费力。

需要更新框架

就像一个软件包,以WordPress为例,框架需要定期更新。新版本由框架团队开发,当社区报告错误时,错误被修复,产生了新的特征。

虽然您可能需要每隔几年更新一次标记,因为新版本的HTML/CSS是开发出来的,如果您从头开始编码它而没有框架的话,您可能会每几个月升级一次您的框架标记。这既耗时又有潜在风险。

我们是否会限制自己的发展知识??

反对框架的一个论点是它们限制了我们对HTML的原始知识,CSS和JavaScript。毕竟,如果有人向我们提供CSS类的列表,已经在样式表中设置样式并预先定义,以及常见的HTML结构,以及预先编写的javascript函数,当然,作为最终用户,我们自己的知识有可能减少。也许是这样,正是因为这个原因,我们应该不断推动自己,推动框架,以确保我们(和我们的客户,如果您为他们开发)始终获得最佳的用户体验,不管我们是否使用框架。

最流行的前端框架

所以假设您想使用前端框架,你用哪一个?外面有很多,一些比其他人更受欢迎,还有一些是为那些比新手更专业的人做的。在这里,我们将简要介绍一些最受欢迎的。

Twitter引导程序

引导程序

引导程序,由Twitter上的两名员工开发,已广泛成为世界上最流行的前端框架。

虽然不是第一个完全响应的框架,现在是这样,并且处理所有设备和屏幕分辨率非常好。

有一个优秀的引导程序开发人员和经验丰富的最终用户社区随时为您提供帮助,文件也经过仔细考虑。

引导程序的类和函数往往非常“完整”,通常完全采用字体,颜色和传统的引导品牌。因此,很难让你的船远离这种感觉,以确保它看起来独特。这就是说,通过一些工作,完全有可能开发一个对您来说是定制的、独特的引导网站。

了解有关引导程序的更多信息
.

祖鲁基金会

祖鲁人

通常使用靴带或基础之间的选择纯粹是个人喜好,因为它们有多么相似,但基金会有几个特点可能会动摇你的投票方向。

首先,基金会的元素乍一看并不是“完整”的。因此,从默认的外观和感觉转向给你的网站它自己的独特品牌通常是非常容易的。

基金会,与使用像素的引导不同,使用rems调整字体大小。虽然这似乎是一个微妙的区别,在响应式设计中使用相对单位(如REMS)是绝对有意义的,相对于像素等绝对单位。

基金会也有一些优秀的内置特征,引导不包含,例如内置表单验证和换乘站,根据设备和屏幕大小动态加载不同浏览器的响应内容的系统(这对于在移动设备上加载较小的图像尤其有用,而不是在桌面上加载可能需要的更大尺寸的图像)。

此外,其他内置功能包括从右到左支撑
很容易让您切换副本,使其从右向左显示,以及内置定价表.

基金会具有所有这些特征,加上引导包含的大部分内容,因此,经常被视为中级到专业Web开发人员的入门框架。

了解更多有关基金会的情况
.

纯CSS

雅虎纯CSS框架

使用Bootstrap或Buffic的开发人员中最大的抱怨之一就是这些包含的臃肿标记。有成千上万行的css和javascript,机会是,你只能利用其中的一小部分。

Pure.css,被称为“纯”,以其最低限度的发展来解决这个问题。顾名思义,这个框架是纯粹的CSS(即没有JavaScript。

使用它,它很简单,只需在网站中包含一个CSS文件。

纯元素有许多不同的元素,它们都可以被吸收和消耗,或者你可以决定取下剩下的元素,因此,将标记膨胀保持在最低限度。

预先开发的元素包括一个强大的响应网格系统,很像Bootstrap和基金会,以及造型风格,按钮,桌子,菜单。

了解更多关于Pure的信息
.

我应该使用哪个框架??

有很多框架可供选择。我们在上面列出了三个,但是还有更多,有些人比其他人更出名。经常,选择取决于个人喜好。

我自己的偏好总是选择引导或基础,纯粹是因为我知道这让我能够在成千上万个其他网站上工作。如果我发现自己处于从另一个开发者那里接管一个网站的位置,开发人员使用Bootstrap或基金会的可能性很高。

在引导与基础之间进行决策时,我经常评估我知道每个特定网站需要的功能。例如,阿拉伯语网页寄存充满了定价表的站点将推动我直奔其“左到右”和“定价表支持”的基础。

一个基本的小册子网站,为一个客户寻找快速和简单的东西,而不必大惊小怪,将使我更倾向于引导,安全的知识,引导程序的组件提供了一个坚实和完整的基础,以调整和修改。

我的建议是不断地尝试它们,并学好它们,这样您就可以根据每个项目的需要选择正确的框架。

我甚至应该使用框架吗??

在讨论单个框架的好处的文章结尾问这个问题几乎是错误的,但这是发展界经常问的问题,最终,就像所有的框架一样,这纯粹是个人喜好。

如果你有时间和倾向于在每次开发一个新的网站时编写响应性的断点并开发一个网格系统,您更喜欢为下拉菜单和弹出式响应菜单编写自己的标记,那么我的建议就是不要使用框架。然而,我几乎可以肯定,如果你真的选择从头开始写,一旦你做了两次以上,你将开始把它们单独保存为组件,以在将来的项目中使用。突然,这样做,您开始构建自己的框架。

最终,所有框架都是增强我们作为开发人员输出的强大工具,同时帮助我们维持共同的结构。它们是快速、轻松地发展强大力量的绝佳方式,用户友好的响应式网站。无论您是否开发自己的组件,并快速掌握这些组件,或者你用一个共同点,公共访问框架,由于人们努力更聪明地工作,我们作为开发人员的工作现在变得更容易了,不难。

以下两个选项卡更改下面的内容。

兴发 游戏杰米哈罗普

兴发 游戏Jamie Harrop是英国的电子商务经理,拥有14年电子商务和自由职业经验的前端开发人员和作家。

Jamie Harrop的最新帖兴发 游戏子看到一切

关于“1”的思考前端框架简介”“

  1. 非常全面的报道和良好的文字-这是一篇优秀的和有帮助的文章。
    谢谢!!

留下评论