前端 流星特效

admin管理员组

文章数量:1794759

前端 流星特效

前端 流星特效

As part of my daily web browsing routine, I follow a number of front-end blogs. I'm always amazed at how far good front-end engineers can push JavaScript and CSS, and how well they are able to master the intricacies of web browsers.

作为日常Web浏览例程的一部分，我关注了许多前端博客。 我一直对优秀的前端工程师能够将JavaScript和CSS推入多高的水平，以及他们能够熟练掌握复杂的Web浏览器感到惊讶。

Yet I also can't help but notice that a lot of front-end developers seem to limit themselves to, well, the front-end.

但是我也忍不住注意到许多前端开发人员似乎将自己限制在前端。

从前到后 (Front to Back)

On one hand this makes sense. With new JavaScript frameworks and browser versions popping up every day, client-side development already offers more than enough to keep you occupied for a lifetime.

一方面，这是有道理的。 随着每天出现新JavaScript框架和浏览器版本，客户端开发已经提供了足够多的资源，可让您终身受益。

Yet the fact remains that it's often hard to build functional web apps without involving a back-end environment at some point, if only to communicate with a database.

然而，事实仍然是，即使仅与数据库通信，要在某个时候不涉及后端环境的情况下构建功能强大的Web应用程序通常很困难。

Up to now, adding a back-end to your app meant learning a back-end language such as Ruby, Python, or PHP. And that new environment came with its own set of patterns and quirks that had to be learnt from scratch.

到目前为止，在您的应用程序中添加后端意味着学习诸如Ruby，Python或PHP之类的后端语言。 而且，这种新环境带有它自己的一套模式和怪癖，必须从头开始学习。

But things are changing. Node.js introduced JavaScript on the server, and for the first time developers could code their whole app in a single language.

但是情况正在改变。 Node.js在服务器上引入了JavaScript，并且开发人员第一次可以用一种语言编写整个应用程序。

Meanwhile, backend-as-a-service offerings like Parse and Firebase now make it possible to add persistent data to an app with little more than a few lines of JavaScript.

同时，像Parse和Firebase这样的后端即服务产品现在使使用几行JavaScript即可向应用程序添加持久数据成为可能。

But to day I'd like to talk about yet a third approach: Meteor, an up-and-coming JavaScript framework that bridges the gap between client and server.

但是今天，我想谈谈第三种方法： Meteor ，这是一个新兴JavaScript框架，它弥合了客户端和服务器之间的鸿沟。

I discovered Meteor about one year ago, and quickly fell in love. I went on to build a popular open-source app with it, used that app to power a very successful project of mine, and ended up writing a book about it!

大约一年前，我发现了流星，并很快坠入爱河。 我继续使用它构建了一个流行的开源应用程序 ，并使用该应用程序为我的一个非常成功的项目提供了动力，最后写了一本关于它的书 ！

Meteor might still be quite new, but I think a lot of front-end engineers and designers would quickly fall in love with Meteor if given the chance.

流星也许还很新，但我认为如果有机会，很多前端工程师和设计师会很快爱上流星。

So here's a quick introduction to Meteor written for people who already live and breathe JavaScript in the browser, but haven't yet crossed over to the "dark side" of server-side JavaScript.

因此，这是Meteor的快速入门文章，是为已经在浏览器中生活和呼吸JavaScript但还没有过渡到服务器端JavaScript的“阴暗面”的人们编写的。

流星？ (Meteor?)

Let's start with the basics: Meteor is a JavaScript framework based on Node.js. Unlike most other JS frameworks, Meteor runs both on the server and the client, meaning you can manage your whole app with a single code base, and that both parts can seamlessly talk to each other.

让我们从基础开始：Meteor是一个基于Node.jsJavaScript框架。 与大多数其他JS框架不同，Meteor 既可以在服务器上运行，也可以在客户端上运行，这意味着您可以使用单个代码库来管理整个应用程序，并且这两个部分可以无缝地相互通信。

Meteor's other selling point is that it's fully reactive and real-time, meaning that any data change on the server will get immediately reflected on the client, without any extra work on your part.

Meteor的另一个卖点是完全React性和实时性 ，这意味着服务器上的任何数据更改都将立即反映在客户端上，而无需您做任何额外的工作。

In practice, this means you can build single-page JavaScript appextremely fast, since most of the server-client plumbing will be taken care of for you.

实际上，这意味着您可以非常快地构建单页JavaScript，因为大多数服务器-客户端管道都将由您来处理。

您已经知道了大部分 (You Already Know Most Of It)

The reason why I think Meteor is a great match for front-end engineers is that the typical JS coder will already be familiar with a decent chunk of a Meteor app's code, even if they've never laid eyes on the Meteor documentation before.

我认为Meteor非常适合前端工程师的原因是，即使以前的JS编码器以前从未看过Meteor文档，但他们已经熟悉Meteor应用程序代码的相当大的一部分。

Of course, the fact that Meteor uses JavaScript everywhere is a big help: unlike with Rails or Django, you won't have to learn a new programming language.

当然，Meteor到处都使用J​​avaScript的事实是一个很大的帮助：与Rails或Django不同，您不必学习新的编程语言。

What's more, Meteor also makes use of all the libraries you're already familiar with (jQuery, Underscore, Handlebars), and they even come included by default with every new Meteor app (although you're also free to replace them with your favorite alternatives).

而且，Meteor还利用了您已经熟悉的所有库(jQuery，Underscore，Handlebars)，并且每个新Meteor应用程序都默认包含了它们(尽管您也可以随意用自己喜欢的库替换它们)备择方案)。

So instead of learning new patterns from scratch, you can simply jump in and put your existing JavaScript knowledge to good use right away.

因此，无需从头开始学习新模式，您只需跳入并立即充分利用现有JavaScript知识即可。

简单设定 (Simple Setup)

One of the big obstacles to crossing the client/server chasm is the need to set up a local development environment.

跨越客户/服务器鸿沟的最大障碍之一是需要建立本地开发环境。

After all, all you really need to handle client-side code is a web browser, and maybe a local instance of Apache if you really want to get fancy.

毕竟，您真正需要处理客户端代码的只是Web浏览器，如果您真的想花哨的话，也许是Apache的本地实例。

On the other hand, setting up most full-stack environments require installing new languages, frameworks, modules, and probably version managers as well.

另一方面，设置大多数全栈环境需要安装新的语言，框架，模块以及可能的版本管理器。

The good news is that Meteor bundles all of that stuff in a single-command super easy install. Just type:

好消是，Meteor将所有这些东西捆绑在一个命令的超级简单安装中。 只需输入：

curl install.meteor | /bin/sh

And you'll be good to go. So if you can open a terminal window, you can probably install Meteor.

而且您会很好。 因此，如果您可以打开终端窗口，则可能可以安装Meteor。

集合与React (Collections and Reactivity)

So if you're already familiar with JavaScript and setup is so simple, what do you actually need to learn to build a Meteor app?

所以，如果你已经熟悉JavaScript和设置是如此简单，你有什么真正需要学习如何建立一个流星的应用程序？

For me, the two key concepts to understand when starting out with Meteor are Collections and Reactivity.

对我而言，从Meteor开始时要了解的两个关键概念是Collections和Reactivity 。

Collections are the MongoDB equivalent of SQL tables, i.e. a way to group similar data together. Meteor exposes a powerful API to publish and subscribe to these collections, and this API lets you control which subset of your data to make available to the browser.

集合等效于MongoDB SQL表，即一种将相似数据组合在一起的方法。 Meteor公开了一个强大的API，可以发布和订阅这些集合，而该API则使您可以控制哪些数据子集可供浏览器使用。

For security as well as performance reasons, you probably don't want to send your whole database over to every client! So mastering collections is one of the first steps to building robust Meteor apps.

出于安全性和性能原因，您可能不想将整个数据库发送给每个客户端！ 因此，掌握馆藏是构建强大的Meteor应用程序的第一步。

The other key Meteor concept is Reactivity. Simply put, any change to a reactive data source will be immediately reflected anywhere this data source is used in the app.

流星的另一个关键概念是React性。 简而言之，对React式数据源的任何更改都将立即反映在应用中使用该数据源的任何位置。

These data sources include not only the data stored in your database, but also things like Session variables or routing filters. What's more, you can also make any variable of your choosing reactive.

这些数据源不仅包括存储在数据库中的数据，还包括会话变量或路由过滤器之类的东西。 此外，您还可以使选择的任何变量成为React性的。

Reactivity is extremely powerful, and also a little magic. And like most magic, it can sometimes have unintended side effects if you're not careful.

React性非常强大，并且还有一点魔力。 和大多数魔术一样，如果不小心，它有时可能会产生意想不到的副作用。

So there's a bit of a learning curve there, but after mastering these concepts you'll quickly see the rest of the framework fall into place.

因此，这里有一些学习曲线，但是掌握了这些概念后，您将很快看到框架的其余部分。

一个例子 (An Example)

Now that you know what Meteor is all about, let's take a look at a quick example of Meteor code.

既然您已经了解了Meteor的全部含义，那么让我们看一下Meteor代码的快速示例。

Here's the code for two of Microscope's templates (in this case, for user notifications).

这是两个Microscope模板的代码(在这种情况下，用于用户通知)。

Note: in case you're wondering, Microscope is the example social news app that you build throughout our book, Discover Meteor.

注意：如果您想知道，“ 显微镜”是您在我们整本书《 发现流星》中构建的示例社交新闻应用程序。

<template name="notifications"> <ul class="notification"> {{#if notificationCount}} {{#each notifications}} {{> notification}} {{/each}} {{else}} <li><span>No Notifications</span></li> {{/if}} </ul> </template> <template name="notification"> <li> <a href="{{postPagePath postId}}"> <strong>{{commenterName}}</strong> commented on your post </a> </li> </template>

And here's the accompanying JavaScript code that powers these templates:

这是为这些模板提供动力的随附JavaScript代码：

Template.notifications.helpers({ notifications: function() { return Notifications.find({userId: Meteor.userId(), read: false}); }, notificationCount: function(){ return Notifications.find({userId: Meteor.userId(), read: false}).count(); } }); Template.notification.events({ 'click a': function() { Notifications.update(this._id, {$set: {read: true}}); } })

I'm willing to bet you can already get an idea of what this code does, without having ever laid eyes on a Meteor app before.

我敢打赌，您以前就不会看过Meteor应用，就已经对代码的功能有所了解。

The first code sample contains two handlebars templates. The first notifications template iterates over the notifications, including the notification for each iteration.

第一个代码示例包含两个车把模板。 第一个notifications模板遍历通知，包括每次迭代的notification 。

The JavaScript code can then simply fill in the blank, by defining the object to be iterated on. In this case, return Notifications.find({userId: Meteor.userId(), read: false}); simply means "return all unread notifications for the current user".

然后，通过定义要迭代的对象，JavaScript代码可以简单地填充空白。 在这种情况下， return Notifications.find({userId: Meteor.userId(), read: false}); 只是意味着“返回当前用户的所有未读通知”。

And of course, this is all reactive, meaning that your list of notifications will be automatically updated as soon as the underlying data changes!

当然，这都是被动的，这意味着您的通知列表将在基础数据更改后自动更新！

If you'd like to learn more, checkout this quick introduction to Meteor templates.

如果您想了解更多信，请查看此流星模板快速入门 。

为什么不试试呢？ (Why Not Give It A Try?)

Now I don't want to make it sound like learning Meteor is a trivial undertaking. It's a new framework that introduces many powerful concepts, and like every new technology it has a learning curve.

现在我不想让听起来像学习流星是一件微不足道的事情。 这是一个新框架，引入了许多强大的概念，并且像每种新技术一样，它都有学习曲线。

But it's not a coincidence is Meteor is getting picked up more and more in hackathons and in education settings: it provides a low-friction environment that makes it easy to get started.

但这并不是巧合，Meteor在黑客马拉松和教育环境中越来越多地被使用：它提供了一种低摩擦的环境，使其易于入门。

So if you have an hour or two ahead of you, I'd suggest you give it a try. After all, if you're looking to learn a server-side development environment, you could do worse that pick one where you'll have a big head start!

因此，如果您要提前一两个小时，建议您尝试一下。 毕竟，如果您想学习一个服务器端开发环境，那么选择一个可以大踏步前进的选择可能会更糟！

获得Discover Meteor 20％的折扣 (Get Discover Meteor 20% Off)

If you're not sure where to get started, our book Discover Meteor can be a great way to quickly get up to speed.

如果您不确定从哪里开始，那么我们的书《发现流星》可能是快速入门的好方法。

In it, you'll learn how to build a real-world, functional web app, including topics such as:

在其中，您将学习如何构建真实的功能性Web应用程序，包括以下主题：

• How to set up user accounts.
  如何设置用户帐户。
• How to set up routing to different templates.
  如何设置到不同模板的路由。
• How to manage various data collections.
  如何管理各种数据收集。
• How to handle permissions and errors.
  如何处理权限和错误。
• How to animate elements in real-time.
  如何实时制作元素动画。
• And much more…
  以及更多…

What's more, if you use this special URL you'll automatically get 20% off at checkout!

更重要的是，如果您使用这个特殊的URL，您将在结帐时自动获得20％的折扣 ！

翻译自: davidwalsh.name/meteor-frontend-engineers

前端 流星特效

本文标签： 流星特效