Most impressive features of Meteor to show in demos

announce
1

People who’ve presented Meteor to audiences new to it, what were the most awe-inspiring moments?

  • hot code reload
  • using Mongo from the console to trigger reactive updates in two different tabs
  • adding OAuth login with Facebook, Google and others with two packages and {{> loginButtons}}
  • meteor run ios
  • meteor deploy

Add yours! When did the audience start to applaud?

3 Likes
2

Open two browsers and start synching data automatically. That’s the golden moment. Before doing that, try to show the code we wrote.

5 Likes
3

Is it for programmers? The database everywhere paradigm is pretty cool, as well as the pub/sub

Try making a collection, then using the JavaScript console to fetch it.
Then change the publication so it only publishes a few fields, then restrict it to signed in users. Easy enough

Meteor.publish('post', function(postId) {
  check(postId, String);
  if(this.userId) {
    return Posts.find({ _id: postId }, {
      fields: {
        "title": true,
        "text": true
      }
    })
  }
})
4

I once dragged around a box (div) while capturing the position and recording it on the database (I know… I know…) but seeing that reflected in almost realtime in another browser got a few "wow"s and then I quickly put together a replay functionality and that was enough to see eyes sparkling. It was like cupid hit them with a meteorite :wink:

1 Like
5

Using Nightwatch to automate through an entire application so they can see how a single person can craft an entire app. After 15 seconds in they’re not entirely sure what they’re seeing; 30 seconds in there’s disbelief, but 60+ seconds onwards there’s just wide-eyed amazement.

I’m excited to be getting to the point of multi-browser ping-pong testing. That’s going to be a hell of a demo!

6 Likes
6

Hopefully, eventually, it will be a chart of profits per programmer.

4 Likes
7
  • Multiple browser windows
  • From nothing to accounts in 20 seconds (make sure you have your client secret/key ready to go during the demo)
  • Magic this in event handlers. I always take a moment to point out that Meteor just gives you that, preventing you from having to store something in the DOM or whatever
  • Coffeescript, less, etc without grunt or gulp
  • Instant CSS hot reload. Use my rahul:animate-everything package for extra oomph during demos
  • Database access from the console
  • Complete the entire demo and then point out how little server code (sometimes, none!) we wrote
  • Show a reasonably feature rich app like cursors and walk through how little code it took to get it to work; I like to point out that the use of the Meteor API is minimal, and what took all the effort is actually browser-specific DOM API stuff. (cube42.nl works well for this too)
5 Likes
8

When demoing to experienced developers, its usually:

  1. ease of syncing data in multiple browsers
  2. ease of integrating OAuth
  3. ease of publishing mobile apps

The Meteor Day demo is probably the most concise way to present these if you can find a recording (or MDG posts the guide?). It was designed to show the best Meteor has to offer.

9

I have a simple app that I made for scorekeeping.
It’s always fun to show off by having some people open it on their phones and watch the data update in real time… added bonus, flick my phone into flight mode, continue to track data and when I turn flight mode off all the data syncs.

So simple and yet so powerful :smiley:

1 Like
10

The best reaction I got was an in-house demo to a group of LAMP stack developers. These guys glaze over at the mention of MongoDB, so I decided to start with the demo and use MySQL (numtel:mysql package).

At the time we were testing MySQL migration plans and had a MySQL server in one datacentre slaving off another in the same datacentre, slaving off another in a different datacentre.

Server 1 had a remote phpMyAdmin, and server 3 had my Meteor dev server connected via numtel:mysql with a browser to render the output:

+-----+   +-----+   +-----+
|MySQL|   |MySQL|   |MySQL|
| (1) |-->| (2) |-->|  (3) |
+-----+   +-----+   +-----+
    ^                  ^
    |                  |
    |              +------+
    |              |Meteor|
    |              |server|
    |              +------+
    |                  ^
 browser               |
(phpMyAdmin)        browser

Those of you who have used the numtel:mysql package will know that it connects as another MySQL slave in order to get the replication log data. So, essentially I had four MySQL servers in a line.

I then used phpMyAdmin to alter the timestamp on a row in server 1. The change propagated across two datacentres and the Internet (to my laptop), and Meteor rendered the change before phpMyAdmin had refreshed its page. Jaws dropped. When I was asked to see how it was done (23 lines of JS) I knew they were hooked. :smile:

8 Likes
11

In an intro to Meteor talk that I did not too long ago, I did a live demo where I made a very simple chat application and encouraged others on the same network to get onto it and watching them see the real-time chat application work was very rewarding and the audience having fun helped a ton. It also showed them how easy it was to get a real time application made. That demo took about 20 minutes to do in total.

1 Like
12

Is that Nightwatch.js for testing?

13

Thanks everyone! Great ideas all around!

It would be a mixed audience, but mostly engineering managers / architects. Some programmers too. To keep the question general, we can specify what would impress what types most.

Here’s the Meteor Day demo by @sashko / @stubailo - 18 minutes from 31:33.

14

All it takes is opening Todos in two different browsers, making a change on one and seeing it on the other. Then I explain: “by the way, that just went from this browser, to the cloud, back to the other browser, automatically.”

Edit: ah see @Arunoda beat me to it.

15

@msavin: showing off Mongol is pretty spectacular, but not sure how much to users new to Meteor.

What are some Mongol equivalents in other frameworks?

16

Is something like Mongol is even possible in other frameworks? I mean, with as little effort as: meteor add msavin:mongol?

17

Hey @cstrat, your app sounds fun and good to demo RT and the offline mode for Meteor apps.
…or, I guess you mean that your phone was simply updated from the server after reconnecting (i.e. after the flight mode off)?
Anyway, can you share the code?

18

Yes, there is a package on atmosphere. There is also xolvio:cucumber if that is your cup of tea.

1 Like
19

@cstrat, is that because you are using Meteor methods to update your data? Or are you using something like GrounDB to handle offline support?

20

@dandv I don’t think Mongol is a good example for beginners - you really need to experience the frustration of the console to appreciate it. I often compare it to Django Admin or PHPmyAdmin