2018 年前端开发五大趋势

对于开发者而言,2017出奇的高效,不过2018年有望为IT领域带来更多发展。本文中,为了处理项目时紧跟潮流,我们会描述出每个前端编程人都需要关注的2018年JavaScript的五种主要发展趋势。

Vue.js

就在两年前,很难想象Vue.js能够忍受迅猛发展的React系统的竞争。经过深思熟虑且久经时间考验的Angular是一回事,但是Vue ……我们没想到这个开发环境成为前端技术工具列表中的佼佼者。 对于那些不熟悉Vue的读者,让我们简要介绍一下它的制胜之道。

为何Vue.js居于榜首?首先,很容易学习并且拥有灵活的创建前端代码的环境,这使得代码编写的出错率较低。Vue的开发者Evan You曾在Angular工作过。 他确定后者对于UI的构建而言不必要且繁琐,他大胆地创建了一个入口门槛很低的前端创建解决方案,因此Vue出现。 它旨在帮助那些编程经验很少的设计人员将所有工作都用于创建功能界面。 此外,Vue.js支持声明式呈现,异步DOM更新,双向数据绑定,以及严格遵守Web组件规范和HTML模板的简单集成。

到目前为止,Vue.js的特性被一个小型的社区支持(相比于React和Angular这种当前特别流行的库来说,这是通过React和Angular的消息来源得到的)。一般来说,如果Angular甚至是React——Javascript最流行的库之一——对你来说过于复杂,而且看起来相当严格和不灵活,那你绝对应该在2018年就结识Vue。

Angular

尽管我们在2018年看到的顶级Javascript库的竞争趋势直接在Angular和Vue.js之间展开,但前者在来年的实用性不会减少。如果你之前还没有使用Angular工作(至少是使用Angular 2),那么你一定要熟悉它的优点。让我们开始吧。

首先,这个框架需要Javascript与HTML和CSS。第二,它是团队协作的理想选择,因为它创建的应用程序可以明确划分为组件 - 业务逻辑和前端。这是可能的,因为开发环境是基于MVVM(模型-视图-视图-模型)模式下的。第三,Angular是创建可扩展应用程序的理想选择,支持与第三方库的简单集成。这个框架经常用于构建动态的移动应用,因为它使用了双向数据绑定,这种方法增加了带有丰富动画元素的应用程序的响应能力。

现在,让我们来讨论一下Angular的缺点。第一件事情,也是开发人员经常提到的,就是在移动设备上的高耗电量(不过与其他框架相比,通过正确的代码优化,可以减少这个问题)和高入门门槛(如果你是从头开始使用Angular开始工作,那么你要准备好去花费1.5到2个月的时间去学习它的大量文档)。那些喜欢“简洁”Javascript编码的开发者在刚接触Angular时

如果我们总结一下上述不同的框架所克服的各种问题,我们可以说Angular是一个久经考验的框架,通过适当的模块化处理,使得它可以构建出可扩展的解决方案(这足以从相关的demo中证明)。因此,我们自信的推断,尽管每年都有越来越多的JS框架进入IT市场,Angular依然是近几年来最好的Javascript框架之一。

GraphQL

GraphQL是一种有着奇怪语法的API查询语言,由Facebook开发者们开发。它的目的是超越传统的REST APIs的功能,同时简化多个源传输的数据集合。

让我们举个具体的列子。想象一下,你需要在正在构建的社交网络框架中显示帖子列表,以及用户的喜好(点赞、收藏等)。在实现方面,这个例子很简单,你只需从下一个数据库端点发出请求。但是,由于这些数据可能来自不同的来源(例如,如果帖子存储在 MongoDB或Redis中),生成的应用将比舒适的工作慢得多。此外,如果您考虑到,随着时间的推移,数据的大小会增加,因此需要更多的存储空间,你会意识到,REST API迟早会耗尽其效率。这就是GraphQL的用武之地,使用GraphQL而不是使用单独的端点来访问每个资源。你可以使用单个端点,该端点能够同时处理涉及多个数据源的复杂查询。与REST模型相比,GraphQL是一个智能的个人助理,使用你指定的源地址,提供所需的内容。

GraphQL的实力也得到了证明:2017年,它被Github,Spotify,Walmart等知名公司所采用。

Gatsby

如果你的预算比较紧张,但是同时又希望在你的项目中只使用高级技术,那么你一定要尝试 Gatsby。Gatsby 是 Kyle Matthews 为静态网站的创建而构建的新型解决方案。

它如何优于同行?与 Jekyll,Hugo 或 Hexo 等流行解决方案不同,这个静态生成器不使用模板,而是信赖于 Webpack 和 React 组件(注意 React 官网本身也是在 Gatsby 的帮助下编写的)。因此,你可以获得自动更新和即时页面转换等优势。从1.0版本开始,Gatsby 使用了上面提到的 GraphQL。因此,在构建过程,它可以从多个 GraphQL API 中获得数据,然后使用它们创建一个完全静态的 React 客户端应用程序。现在,让我们从枯燥的特征列表转移到真正的问题,看看 Gatsby 是否适合你。

Web 开发者使用现成的引擎并不总是那么容易。即使是最受欢迎的那些,比如 Joomla 或 Wordpress,也会以需要及时更新或安全性不足的形式给它们的用户带来麻烦(经验丰富的黑客在攻击你的网站上未更新的关键插件时会遇到些麻烦,这是为了在以后的欺诈活动中使用它)。主题也是许多内容管理系统的弱点。相反,开发者更喜欢使用单独的模块,这些模块可以在将来根据自己的需要重写。此外,CMS 在性能优化方面会限制其用户(是的,最先进的,可以更快的让你创建网站的解决方案;然而,在多个用户大量请求服务的情况下,并不容易加快使用现成引擎所编写的网站)。这就是为什么静态网站在这些年变得如此流行。除了我们上面描述的明显的优势外,这种页面有一个重要的缺点 —— 它的内容不容易被编辑。静态网站生成器专门用于解决此问题,Gatsby 是其中最好的,感谢 GraphQL。我们坚持认为,任何在职的前端工程师在 2018 年至少都能掌握这个流行工具的基本知识。

Storybook

Storybook 是开发者在与 React 打交道过程中一个有用的开源工具。特别是,得亏 StoryBook,你可以在独立的环境中设计和策划应用程序外的 UI 组件,并且在创建新的 UI 组件时它会发生变化。如果这个功能对你来说并不太重要,那么让我们考虑一下 Storybook 将帮助解决几个严重问题的情况。

今天,许多有用的工具支持简单快速地创建功能性客户端 - 服务器系统,包括最着名的 Meteor、Firebase、GraphQL 和 Falcor。所有这些工具使编程过程基础化,应用程序可快速响应。虽然 React 及其热门的重加载功能对于 UI 创建的开发者来说是一个很大的帮助,但设计阶段仍然需大量的时间和编写不少代码行。

设想一下,你有一个待办事项列表的组件。它拥有几个状态(一个空列表,一个部分填充的列表,列表中所有元素都被填充,列表中仅有一些元素被填充),我们需要适配每个元素的 UI。即使你可以创建一个通用代码来根据每个状态转换应用程序界面,你仍然需要记录它(否则对其他团队成员而言是很难理解的)。Storybook 如何在这里提供帮助?

如前所述,React Storybook允许您在应用程序之外开发和测试UI组件,并允许团队中的其他开发人员继续使用它们。 也就是说,有时会加速界面开发的过程。

2018年JS趋势:总结

我们非常希望我们的名单能够引起您对来年最显着的前端发展趋势的关注。 另一方面,如果您已阅读本参考资料,并希望将主要项目工作委托给专业人士,我们将很乐意接受这一责任! 我们的专家随时准备为您提供预算内最先进的技术。 立即联系我们以获取更多信息并讨论您项目的详细信息。

原文:https://applikeysolutions.com/blog/top-5-trends-in-front-end-development-for-2018 翻译:子影, 总长, lnovonl, Tocy, wujunchuan1994


原文发布于微信公众号 - 我就是马云飞(coding_ma)

原文发表时间:2018-09-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程微刊

进阶攻略|前端最全的框架总结

1985
来自专栏SEO

搜索新规则下,移动端如何优化?

2956
来自专栏极客编程

前端开发路线图——从小白到前端工程师

编者按:很多人都想学编程。但是苦于没有具体的步骤和指导。比如想找份前端开发的工作,却不知道应该先学习什么再学习什么,也不知道该选择什么样的工具。因为经常被人问到...

1611
来自专栏程序员宝库

现代前端开发路线图:从零开始,一步步成为前端工程师

编者按:很多人都想学编程。但是苦于没有具体的步骤和指导。比如想找份前端开发的工作,却不知道应该先学习什么再学习什么,也不知道该选择什么样的工具。因为经常被人问到...

1496
来自专栏DeveWork

前端页面中 iOS 版微信长按识别二维码的bug 与解决方案

iOS 版微信(目前为6.2.2版本)内置浏览器中长按识别二维码有一个bug 会导致无法识别,安卓下就可以。本文将为你重现这个bug 并给出实际中的解决方案。 ...

4088
来自专栏程序员的知识天地

最有效、最全的Vue 2.0 学习路线,各个阶段适用

对于我这种从0.x版本就开始体验 vuejs 的人来说,当然不算难,那时候没各种脚手架和复杂搭配,仅仅是一个mvvm的解决方案库而已,解决了jq带来的繁琐操作d...

1712
来自专栏编程微刊

进阶攻略|前端最全的框架总结

前端的技术日渐更新,最近得空,花了一上午的时间,将前端常见的UI框架总结了一下,在开发的过程之中,有了这些,不断能够提高自己的工作效率,还可以在工作之余了解更多...

42310
来自专栏极客慕白的成长之路

2018 前端趋势:更一致,更简单

1392
来自专栏即时通讯技术

从客户端的角度来谈谈移动端IM的消息可靠性和送达机制

IM App 是我做过 App 类型里复杂度最高的一类,里面可供深究探讨的技术难点非常之多。这篇文章和大家聊下从移动端客户端的角度所关注的IM消息可靠性和送达机...

2161
来自专栏腾讯移动品质中心TMQ的专栏

腾讯TMQ在线沙龙回顾|UI自动化——adbui的使用及实现

1674

扫码关注云+社区

领取腾讯云代金券