快捷搜索:

前端技术选型的遗憾和经验教训

作者: 互联网资讯  发布:2019-11-07

百乐门棋牌 1

因个人精力有限,暂停简书的维护,欢迎大家关注我的知乎https://www.zhihu.com/people/wei-wei-24-86-36/activities,会持续分享前端、Web开发相关文章

我是 Max,Spectrum 的技术联合创始人。Spectrum 是一个面向大型在线社区的开源聊天应用程序,最近被GitHub 收购。我们是一个三人团队,主要拥有前端和设计背景,我们在这个项目上工作了近两年时间。

微信原文:2016年JavaScript领域中最受欢迎的“明星”们

事后看来,以下是我做出的令自己感到遗憾的技术选型以及从中学到的经验教训。

JavaScript社区的发展正如盛壮之时的骐骥,—日而驰千里,趋势如长江后浪推前浪。

遗憾 1:没有使用 react-native-web

2016年已经过去,2017的工作已经开启,你是否会担心错过一些重要的东西?无须担心,JS.ORG不久前分享了一篇博文:https://risingstars2016.js.org,为大家回顾了去年主要的趋势。

Spectrum 的很大一部分吸引力在于内容是公开的和可搜索的,所以我们在开发原生应用之前先开发了网站。

前端之巅翻译并整理了这篇博文,以飨读者。

我们的搜索索引做得很成功,但用户一直在要求有更好的移动体验。我们现在正在开发原生应用程序,但因为是从头开始,所以很耗时。如果我们当初使用 react-native-web 来构建网站,就可以重用一些基础组件,加快原生应用程序的开发速度!

JS.ORG通过比较过去12个月里,在Github上增加的星标数,告诉你2016年的趋势。

最重要的是,我们应该已经对网站的移动版本进行了优化。如果移动体验做得足够好,即使是在桌面上也是可接受的,只需要做一些调整即可。然而,桌面体验在移动设备上的表现就有点令人生厌了。事实证明,不管我们做得多么好,都难以在各种尺寸的设备上有良好的表现。

在2015年,React是社区之王,Redux在与Flux的大战中获胜。那么,谁是2016年的JavaScript的新星?

学到的第 1 课:构建一个好产品就是要不断进行实验,加快开发速度,为了迭代速度和灵活性而优化。

以下图表比较了Github在过去12个月中增加的星标数量。JS.ORG分析了bestof.js.org的项目,这是一个与网络平台相关的最佳项目的精选列表。

出于 SEO 的目的,我们需要使用服务器端渲染。但我们已经使用 create-react-app 构建了应用程序的第一个版本。我们考虑过切换到 Next.js,但我认为重新设计路由和数据获取比我们自己构建服务器端渲染的工作量更大。

一. 2016年最受欢迎的项目

但事实证明,自己构建生产就绪的服务器端渲染非常困难。它需要很大的工作量,并且很难为开发人员和用户提供良好的体验。

概述

百乐门棋牌 2

Snip20170204_1.png

通过一年中最热门的10个项目,由此可以很好地了解2016年的Web开发环境,因为您会发现:

以上展现了2016年中,JavaScript表现出了无处不在,功能多样的特性。

Next.js 提供了惊人的开发体验和性能,更不用说活跃的社区和优秀的文档。如果我们现在重新开始,我会怀着激动的心情使用它。

2016年的王者

Vue.JS项目在去年的GitHub上获得了超过25,000颗星标,将包括React和Angular的其他框架甩在身后,一骑绝尘。

10月发布的Veu.JS的百乐门棋牌,版本2,带来了虚拟DOM的性能。

Vue.JS用于大公司(包括阿里巴巴,中国最大的电子商务公司)的生产,所以你可以认为它是一个安全的选择。

它已经有一个相当成熟的生态系统,包括路由(vue-router)和状态管理库(Vuex)。

看来Vue.JS采用了最好的React(组件方法)和AngularJS(模板是HTML代码增强的框架特性)。

学到的第 2 课:尽可能使用现有的解决方案来解决技术问题,特别是那些你不了解的问题。

二. 前端框架

百乐门棋牌 3

Snip20170204_2.png

“前端框架”这一分类可能是2016年JavaScript最累的一个牌行榜,几乎每个月都会出现一个竞争者,但是,这推动了创新的步伐。

确切地说,在这个类别中混合了两种类型的项目:

  • 完整的框架包含了所有功能,能够创建一个现代的Web应用程序(路由、数据提取、状态管理)。AngularJSAngular 2EmberAurelia都属于这一类。

  • 更轻量级的解决方案专注于UI层,如ReactVue.JSInferno,等等。

我们已经提到了总体排名第一的Vue.JS,让我们看看其他竞争者。

我之所以选择 RethinkDB 作为我们的主要数据存储,主要是因为它的 changefeed 功能。这个功能允许你监听几乎任何一个查询的实时更新。我认为它可以降低系统的复杂性,因为我们不需要为了实时功能单独使用另一个发布和订阅系统。

React及其竞争者

React总体排名第二,前端开发者没有谁可以忽略React及其丰富的生态系统。

React如此受欢迎,它激发了很多其他库,旨在采取最好的React,没有臃肿,提高在浏览器的性能和构建时间。

Inferno是这个类别中最受欢迎的项目,它声称是React最快的替代品。

在我们的排名中,紧跟Inferno之后,Preact也是React的一个不错的替代品。它的生态系统是相当成熟的,例如有一个具有离线功能的Bolierplates、路由、Compat模块,以便您可以使用Preact项目中的任何现有React库。

但不幸的是,我们在 RethinkDB 上遇到了很多麻烦。由于它没有被广泛使用,几乎没有关于如何操作数据库的文档和资料。我们经历了好多次数据库中断,调试问题感觉像是在蒙着眼睛走路。

Angular 1和Angular 2

Angular项目已经拆分为2个存储库,因为Angular 2是Angular 1的完全重写,即使一些概念保持不变。

Angular 2是用TypeScript编写的,并且利用ES6提供一个现代和彻底的框架。

AngularJS项目是1.x的分支,它在许多项目中仍然使用,并将继续流行一段时间。

值得一提的是,Ember虽然拥有庞大的生态系统,但它的社区并不在前十名。

因此看起来,与其选择“开箱即用”的所有功能的完整框架,2016年开发商更倾向轻量级的方案,并喜欢组成自己的方案——“点菜”。

在2016年调味的更轻的方法,并更喜欢组成自己的解决方案“点菜”。

事实证明,changefeed 的可扩展性并不如我们预期的那样好。虽然我们设法解决它,但我们原本没有必要这么做。

三. Node.js框架

百乐门棋牌 4

Snip20170204_3.png

2016年,使用以下解决方案创建和部署node.js应用程序从未如此简单:

Gomix这样的项目甚至降低了Node.js世界的门槛,使得任何人都可以在浏览器中轻松点击几下来编写共享 Node.js代码。

如果你必须构建一个Web应用程序,你会选择哪个框架?

现在,我会选择一个更成熟的数据库(或许 Postgres?),并基于它构建一个发布和订阅系统。

Express

当你使用node.js构建Web应用程序时,Express通常被视为事实上的Web服务器。它的哲学(一个可以使用中间件包扩展的简约核心)是大多数node.js开发人员熟悉的。

学到的第 3 课:谨慎选择以后难以更改的核心技术。

Koa

Koa的哲学接近Express,但它是使用ES6生成器,以避免有时被称为回调地狱的问题。

学到的第 4 课:在选择技术时,优先考虑社区规模和维护活跃度,尤其是在不熟悉的领域。

Feathers

Feathers是一个非常灵活的解决方案,创建一个“面向服务”的架构,它是一个很好的适合创建node.js微服务。

文本输入是 Spectrum 用户的主要活动之一,我们希望为用户带来很棒的输入体验。我决定使用基于 Draft.js(最近由 Facebook 发布)的自定义 WYSIWYG 编辑器替换纯文本 Markdown 输入。

Nodal

Nodal框架以目标无状态和分布式服务连接到PostgreSQL数据库。

可惜的是它效果并不好。即使经过数月的努力,我们的用户仍然在不断抱怨,说编辑器真的很难用。最重要的是,编辑器的库占了我们 Java 包大小的大部分,而且缺乏跨浏览器支持意味着我们必须将普通文本输入作为后备选项。

Keystone

Keystone是我所知得到一个管理客户端并运行得最好的解决方案之一,以便管理来自MongoDB数据库的内容。管理界面自动从模型生成,具有所有CRUD操作和精细的过滤器。

另一个框架可能效果更好,但我们应该专注于更紧迫的功能。我认为我们需要 WYSIWYG 编辑,但并没有与用户就此事展开交流。否则,我们很快就会意识到根本就没有必要所以这个编辑器。

Sails

Sails是一个完整的MVC框架,受Ruby on Rails的启发(因此名为Sails!)。它已经存在了很长时间。它可以与任何类型的数据库(SQL或无SQL)良好工作。

学到的第 5 课:在考虑新技术时要谨慎,偏向保守的选择。

Loopback

Loopback是另一个成熟的框架,内置许多函数,包括使用令牌和到任何类型的数据库的连接器的认证。

它的杀手级功能是API浏览器功能,允许开发人员以直观的方式检查所有API端点,并能检查任何用户的令牌。如果你必须构建一个API,这绝对是一个不错的选择。

学到的第 6 课:开放路线图,了解用户的优先事项。

四. React Boilerplates

百乐门棋牌 5

Snip20170204_4.png

React是一个伟大的UI库,但使用React和现代Web开发工作流工具需要大量的配置。那么如何开始创建一个应用程序呢?

这是React的“Boilerplates”和其他“Starter Kits”提供的答案:

即使改变了这些决定,也不会让 Spectrum 自己成为更好的产品。但这样会节省我们的时间,让我们花更多的时间进行实验。

Create React App

Facebook通过提供一个称为Create React App的轻量级方法来解决这个需求,这是一个非常方便的启动一个新的React项目。

Dan Abramov(Redux的创造者,现在为Facebook工作)做了一个伟大的工作,在简单性和功能找到了正确的平衡点。例如,没有花哨的样式解决方案(只是简单的CSS),没有服务器端渲染,但是所有的一切,都很好地打包了,开发人员的体验非常棒。

与其竞争者的主要区别是,如果使用Create React App,它将成为项目的依赖项,所有的魔法是隐藏的,你看到的只是你的应用程序代码。您可以随时升级依赖关系,它并非只是一个起点。

总而言之,以下是我总结的六个经验教训。

React boilerplate

命名为React boilerplate具有您需要的一切,包括Redux和一些漂亮的离线功能,利用web workers技术。

它让开发人员创建所谓的渐进式Web应用程序(Progressive Web Applications,PWA):离线运行的Web应用程序,使用一种名为Service Worker的技术,请阅读NicolásBevacqua的文章。

Next.js

Next.jsZeit创建,具有可用于创建通用应用程序的服务器端呈现功能(或同构应用程序,如我们在2015年所说),也就是说客户端和服务器端运行的应用程序使用相同代码。

五. Mobile

百乐门棋牌 6

Snip20170204_5.png

JavaScript无处不在,你可以使用技术Web开发人员已知的任何技术(HTML、JavaScript、CSS)构建移动应用程序。

本文由百乐门棋牌发布于互联网资讯,转载请注明出处:前端技术选型的遗憾和经验教训

关键词:

上一篇:没有了
下一篇:没有了