前端框架介绍

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

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

什么是前端框架??

你可能知道它们是引导或基础。这是两个最流行的前端框架,but there are many more that we'll discuss later in this blog post.

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

This technique of pre-defining pieces of markup for reuse over time has happened for many years,但常常是私下里,不管是一个建立了自己班级的机构,图书馆和职能部门加快生产,or a one man hobbyist who wanted to work smarter,而不是更难。现在的区别,当然,前端框架已经公开了,成为主流,并成为大众所能接触到的。

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

公众,主流,可访问的和预先开发的框架,例如由Zurb通过Twitter或基金会引导然而,将这个初始阶段的工作从用户身上带走,并将其放在框架开发人员自己身上。现在框架,a concept primarily developed privately to speed up in-house development,帮助Web开发人员变得更加高效,这要归功于一群友好的人,他们的角色是为我们这些人开发框架,不仅没有时间从头开始编写所有标记(第一个问题)。but also too strapped for time we can't even write our own framework to solve the first problem.聪明的,而且非常有用!!

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

框架

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

速度和简单性

前端框架的主要目标始终是加快开发人员的生产,降低成本,提高产量,and do so while keeping it simple,对于最初学的Web开发人员来说,简洁明了。Every good frontend framework achieves this goal,允许那些不熟悉标记的人以最小的工作量快速地获取和学习定义的类和函数。

没有什么比管理一个你没有开发的网站和不得不花费数天的时间更令人沮丧的了,或者可能是几周,熟悉以前的开发人员标记。我们都有独特的笔迹,和HTML,CSS和JavaScript标记相同。每个Web开发人员都有自己独特的签名;他们自己构建标记的方式和自己的常见错误修复方法。A common,公共框架立即解决了这个问题,because the structure and markup signature is defined not by the end-user,但是框架开发人员,被全世界认可。

我可以走进任何公司,任何业余爱好者的办公室,任何机构,and as long as they were using one of the frameworks listed in this article,I'd be able to recognise,理解,重要的是,在几分钟内就可以轻松地完成标记。这就是由一个共同的结构和一组共同的规则支持的共同语言的好处,以实现共同的目标。Without a framework,或者有了内部开发的框架,这种好处不存在。Instead,开发人员在他们从过去的个人承担的任何项目的头几天或几周内,一直在尝试熟悉继承的标记。

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

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

While it's useful to do your research and know (I'd strongly recommend it),一想到必须编写样式表模板来针对所有这些场景,我就感到害怕。

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

For example,the ability to hide and show different containers on different screen sizes is nothing more than the addition of a class to your

.(
要使用Twitter引导隐藏智能手机设备上的DIV,顺便说一下)It's simple,向前直走,只要您有一个所有可用类和函数的方便列表(我们稍后将讨论)。它比计算出你需要的屏幕宽度要容易得多,然后写下规则来设置这个DIV显示:无。当然,this is still happening in the background,but it has been written for you already and all you need to do is target it with the correct pre-defined class.

预先测试的标记

You can be confident the markup contained within any good frontend framework has been tested and has passed a rigorous set of criteria before it was signed off and handed to you,the end-user.常见的和不常见的错误已经被识别出来,评估并解决,在整个项目中只剩下很少的bug修复工作。

The Decision Making Process is Made Easy

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

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

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

As we discussed earlier,当您有文档支持您时,框架非常有用。It's a worthless tool without the documentation to explain the structure of the framework and the classes and functions available for you to tap into.Fortunately,所有优秀的前端框架都有优秀的文档,大多数都有一个出色的社区支持网络,由框架开发人员和经验丰富的最终用户组成。

The Flaws of Frontend Frameworks

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

定制困难

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

框架必须在为您提供随时可用的元素之间找到平衡,同时也不会锁定这些元素的功能和定制能力。有时,找不到这个余额,and we end up using functions and classes that are already pre-styled for us and programmed to work a specific way.偏离这一点通常是相当困难的。这给我们带来了下一个缺陷。

网站外观相同的可能性

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

缺乏对代码的熟悉

虽然使用一个通用框架并能够在检查源代码的几分钟内编辑整个世界的网站是一个很好的优势,一旦开始尝试编辑框架的原始标记,而不仅仅是将系统作为最终用户使用,这变得很棘手。有数百行CSS和数百行JavaScript,全部由框架开发人员编写,your familiarization of that code will be non-existent,therefore making it extremely laborious should you wish to edit the framework functionality itself.

需要更新框架

就像一个软件包,以WordPress为例,框架需要定期更新。New releases are developed by the framework teams,当社区报告错误时,错误被修复,and new features are produced.

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

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

One argument against frameworks is they restrict our raw knowledge of HTML,CSS和JavaScript。After all,如果有人向我们提供CSS类的列表,already styled and pre-defined in a stylesheet,以及常见的HTML结构,and pre-written Javascript functions,当然,作为最终用户,我们自己的知识有可能减少。也许是这样,正是因为这个原因,我们应该不断推动自己,推动框架,以确保我们(和我们的客户,如果您为他们开发)始终获得最佳的用户体验,不管我们是否使用框架。

最流行的前端框架

所以假设您想使用前端框架,你用哪一个?外面有很多,some more popular than others,and some made for those more technical than a novice.Here,我们将简要介绍一些最受欢迎的。

Twitter引导程序

引导程序

引导程序,developed by two employees at Twitter,已广泛成为世界上最流行的前端框架。

While not the first framework to be fully responsive,现在是这样,并且处理所有设备和屏幕分辨率非常好。

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

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

Find out more about Bootstrap
.

祖鲁基金会

祖鲁人

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

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

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

基金会也有一些优秀的内置特征,引导不包含,例如内置表单验证和换乘站,a system used to dynamically load responsive content for different browsers depending on device and screen size (this is especially useful for loading smaller images on mobile devices,instead of loading larger dimension images that one might require on a desktop).

此外,其他内置功能包括从右到左支撑to
easily allow you to switch copy so it reads right to left,以及内置定价表.

Foundation has all these features,加上引导包含的大部分内容,and as a result is often seen as the go-to framework for intermediate to professional Web developers.

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

纯CSS

雅虎纯CSS框架

One of the largest gripes of developers using Bootstrap or Foundation is the amount of bloated markup these contain.有成千上万行的css和javascript,机会是,你只能利用其中的一小部分。

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

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

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

Pre-developed elements include a robust responsive grid system to work on,很像Bootstrap和基金会,以及造型风格,按钮,桌子,菜单。

了解更多关于Pure的信息
.

我应该使用哪个框架??

There are so many frameworks to choose from.我们在上面列出了三个,但是还有更多,some more well known than others.经常,选择取决于个人喜好。

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

在引导与基础之间进行决策时,I often assess the features I know I'll need for each particular Web site.For example,阿拉伯语网页寄存充满了定价表的站点将推动我直奔其“左到右”和“定价表支持”的基础。

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

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

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

It almost feels wrong to ask this question at the end of an article talking about the benefits of individual frameworks,但这是发展界经常问的问题,最终,就像所有的框架一样,这纯粹是个人喜好。

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

最终,all frameworks are powerful tools to improve our output as developers,同时帮助我们维持共同的结构。They're an excellent way to quickly and easily develop powerful,用户友好的响应式网站。Whether you develop your own components and have these quickly to hand,或者你用一个共同点,public access framework,由于人们努力更聪明地工作,我们作为开发人员的工作现在变得更容易了,不难。

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

亚博足球苹果Jamie Harrop

亚博足球苹果Jamie Harrop是英国的电子商务经理,拥有14年电子商务和自由职业经验的前端开发人员和作家。

Latest posts by 亚博足球苹果Jamie Harrop看到一切

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

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

留下评论