From

Atmosphere

to

npm

Namir Sayed-Ahmad Baraza

@namirsab [github|twitter]

namirsab@gmail.com

I'm a software engineer at

We use meteor to develop our tool

What we are going to see...

• From 1.2 to 1.3 with ES6 Modules

• Pros

Introduction

• Blaze for the Frontend / Templating System
• MongoDB as the Database
• Atmosphere as our package manager
• Meteor magics for the rest!

Now is different

• Blaze / React  / Angular[1.x|2.x]

• MongoDB ( but Apollo in the Roadmap)

• Atmosphere and npm as packages managers

• Meteor for the rest ( but less than before)

What Is Atmosphere?

• Package manager for Meteor

• It is the best friend of Meteor developer

• Simple to use
• All for Meteor
• Simple to write and publish packages

• Outside of the general ecosystem
• Version managing is really strict

What Is npm?

• Originally the Node Package Manager

• Nowadays, is just the Javascript Package Manager

• Just like pip  for Python and gem for Ruby

• Very configurable
• +250 000 packages
• Snippet catalog
• Simple to write and to publish a package
• Used among all the community
• Allows private npm

• More complex to use than  Atmosphere
• It's not only  for Meteor

What is in the Roadmap?

Migrating a Package

From 1.2 to 1.3 with ES6 modules

const height = new ReactiveVar(window.outerHeight);
const width = new ReactiveVar(window.outerWidth);
const $window = $(window);

Meteor.startup(() => {
    $window.resize(function() {
        height.set(window.outerHeight);
        width.set(window.outerWidth);
    });
});

// Global Symbol necessary to export it
WindowState = {
    isMaximized() {
            const currentHeight = height.get();
            const currentWidth = width.get();
            const availHeight = screen.availHeight * 0.9;
            const availWidth = screen.availWidth * 0.9;

            return !(currentHeight < availHeight || currentWidth < availWidth);
        },

        height: () => height.get(),
        width: () => width.get()
};

Original code

Original package.js

Package.describe({
    name: 'qlp:qlp-window-state',
    version: '0.0.1',
    // Brief, one-line summary of the package.
    summary: '',
    // URL to the Git repository containing the source code for this package.
    git: '',
    // By default, Meteor will default to using README.md for documentation.
    // To avoid submitting documentation, set this field to null.
    documentation: 'README.md'
});

Package.onUse(function (api) {
    api.versionsFrom('1.2.0.2');

    api.use([
        'ecmascript'
    ]);
    // Packages for Client
    api.use([
        'jquery',
        'reactive-var',
    ], 'client');

    api.addFiles('client/WindowState.js', 'client');
    // Export the Global Symbol we've defined in client/WindowState.js
    api.export('WindowState');
});

import { ReactivVar} from 'meteor/reactive-var';
import { jQuery as $} from 'meteor/jquery'; // Note we import everything now

const height = new ReactiveVar(window.outerHeight);
const width = new ReactiveVar(window.outerWidth);
const $window = $(window);

Meteor.startup(() => {
    $window.resize(function () {
        height.set(window.outerHeight);
        width.set(window.outerWidth);
    });
});

// The symbol is not global anymore
const WindowState = {
    isMaximized() {
        const currentHeight = height.get();
        const currentWidth = width.get();
        const availHeight = screen.availHeight * 0.9;
        const availWidth = screen.availWidth * 0.9;

        return !(currentHeight < availHeight || currentWidth < availWidth);
    },

    height: () => height.get(),
    width: () => width.get()
};

// We export it using ES6 exports
export {
    WindowState
};

New Code

New package.js

Package.describe({
    name: 'qlp:qlp-window-state',
    version: '1.0.0',
    // Brief, one-line summary of the package.
    summary: '',
    // URL to the Git repository containing the source code for this package.
    git: '',
    // By default, Meteor will default to using README.md for documentation.
    // To avoid submitting documentation, set this field to null.
    documentation: 'README.md'
});

Package.onUse(function (api) {
    api.versionsFrom('1.3.2.4');

    api.use([
        'ecmascript'
    ]);
    // Packages for Client
    api.use([
        'jquery',
        'reactive-var',
    ], 'client');
    // Now we export it with api.mainModule
    api.mainModule('client/WindowState.js', 'client');
});

Just a few changes

• Remove global object

• Remove api.export

• Use api.mainModule

Migrating a Package

From 1.3 with ES6 modules to npm package

Steps

• Create /node_modules

• Create package folder

• Initialize npm package

• Now fill everything npm asks you
• Move your package code into the new folder

You should have something like this

Back to our example:  package.json

First Problem with npm

import $ from 'jquery'; //jquery now comes from npm

const ReactiveVar = importFromMeteorPackage('reactive-var', 'ReactiveVar');
const height = new ReactiveVar(window.outerHeight);
const width = new ReactiveVar(window.outerWidth);
const $window = $(window);
// No more Meteor.startup. We don't want more Meteor dependecies.
$(document).ready(function () {
    $window.resize(function () {
        height.set(window.outerHeight);
        width.set(window.outerWidth);
    });
});

const WindowState = {
    isMaximized() {
        const currentHeight = height.get();
        const currentWidth = width.get();
        const availHeight = screen.availHeight * 0.9;
        const availWidth = screen.availWidth * 0.9;

        return !(currentHeight < availHeight || currentWidth < availWidth);
    },

    height: () => height.get(),
    width: () => width.get()
};
// npm module.exports instead of export from js
module.exports = {
    WindowState
}

New Code

Transpile npm packages

1. npm install babel-cli babel-preset-es2015 --save-dev
2. Create build script
3. Change package entry point to point to the transpiled code

{
  "name": "qlp-window-state",
  "version": "1.0.0",
  "description": "Reactive Window State",
  "main": "./distribution/WindowState.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
     "build": "babel client --presets babel-preset-es2015 --out-dir distribution"
  },
  "author": "quantilope",
  "license": "MIT",
  "dependencies": {
    "jquery": "^2.2.4"
  },
  "devDependencies": {
    "babel-cli": "^6.9.0",
    "babel-preset-es2015": "^6.9.0"
  }
}

New package.json

Conclusions

1.2 Packages

• Compatible with <= 1.3
• We are used to write them

• One day they will be deprecated
• Force us to write global symbols inside packages

1.3 Packages with Modules

• Use of ES6 modules
• Better syntax. No global symbols.
• It's more futureproof

• They don't work < 1.3
• Force us to write global symbols inside packages
• Still will be deprecated sooner than later

1.3 npm packages

• npm packages, with all npm features.
• Embrace the ecosystem. Learning to write npm packages makes us more valuable as developers.
• It's totally futureproof. Meteor wants to move everything to npm.

• They don't work < 1.3
• They are a little bit more complex to handle.
• You cannot depend on atmosphere packages.
• No automatic transpiling

Bibliography

• The Meteor Guide
• How to Build and Publish ES6 npm packages today, with Babel

Access to the code

https://github.com/namirsab/meteor-pkg-migration

• meteor-lte-1.2
• meteor-gte-1.3-modules
• meteor-gte-1.3-npm

Checkout this branches