Meteor 1.3

Introduction

Keeping the 'wow'
+ adding clarity

Viable for Large Scale App

Alignment with JS

Alternative backends

Better

Application

Testing

More open for contribution

ES2015 / ES6

100% built in support in Meteor

without any transpiler

var vs let

const

//cannot change constant
const PI = Math.PI;
PI = 123;
var type = 'grizzly';

while(true){
	var type = 'polar';
	console.log(type);
	break;
}

console.log(type);
polar, polar
polar, grizzly

Error!

let type = 'grizzly';

while(true){
	let type = 'polar';
	console.log(type);
	break;
}

console.log(type);
//great for initiating 3rd library
const moment = require('moment');

Class/Extends vs Function/Prototype

class Bear {
	constructor(){
	   this.type = 'bear';
	}
	says (say){
	   console.log(this.type + ' says ' + say);
	}
}

class Grizzly extends Bear {
	constructor(){
	   super();
       	   this.type = 'grizzly'
	}
}

let bear = new Grizzly();
bear.says('growl');

Output grizzly says growl

Template Strings

let bear = 'grizzly';
let says = 'growls';

console.log(`the ${bear} says ${says}`);
let bears = `
grizzly
polar`;

console.log(bears);

the grizzly says growls

grizzly

polar

Arguments

function bear(type){
  type = type || 'grizzly';
  console.log(type);
}
bear();
function bear(...types){
  console.log(types);
}
bear('polar','grizzly');
['polar','grizzly']

grizzly

function bear(type = 'grizzly'){
  console.log(type);
}
bear();

grizzly

Default Param

Array Parameter

Modules

magic global

  • load order

  • dependency management

  • performance optimization

Import / Export modules to accomplishes:

class TodosCollection extends Mongo.Collection {
  insert(doc, callback) {

    ourDoc.createdAt = ourDoc.createdAt || new Date();
    return super(doc, callback);
  }
}

export default Todos = new TodosCollection('Todos');

Splitting files into modules

// This defines a starting set of data to be loaded if the app is loaded with an empty db.
import './fixtures.js';

// This file configures the Accounts package to define the UI of the reset password email.
import './reset-password-email.js';

// Set up some rate limiting and other important security settings.
import './security.js';

// This defines all the collections, publications and methods that the application provides
// as an API to the client.
import './register-api.js';
//named exports
export const CATURDAY = 'Saturday';
export function catLoaf() {};

//exporting our toys array as catToys
let toys = [ 'yarn', 'feather', 'catnip' ];
export { toys as catToys };
import CATURDAY from '/server/modules/catStuff.js'
import catToys from '/server/modules/catStuff.js'

// Importing a default export. .js is implied on filenames so we 
// can omit it while importing.
import laserPointer123 from './modules/laser-pointer';

// Importing named exports.
import { CATURDAY, catLoaf, catToys } from './modules/cat-stuff';

main.js

/server/modules/catStuff.js


export default function laserPointer() {
  return { color: '#DA5347;'};
} 

const function eatSleepPlayRepeat () {};
export { eatSleepPlayRepeat as default };

/modules/laser-pointer.js

Mobile

  • Updated to latest Cordova

  • WKWebView: Far better performance for iOS8 & 9

  • Better hot-code push

    • Fallback if code error

    • Incremental file updates

Testing

Official test in place of Velocity

///CLIENT/MODULES/CAT-STUFF.TESTS.JS

import { mocha } from 'meteor/avital:mocha';
import { chai, assert } from 'meteor/practicalmeteor:chai';
import laserPointer from './cat-stuff.js';

describe( 'Cat Stuff', () => {
   it( 'draws a laser pointer\'s position as a number', () => {
     let laser = laserPointer();
     assert.typeOf( laser.position, 'number' );
   });
});
meteor test --driver-package avital:mocha --port 3100

Example

const countLists = () => {
  browser.waitForExist('.list-todo');
  const elements = browser.elements('.list-todo');
  return elements.value.length;
};

describe('list ui', () => {
  beforeEach(() => {
    browser.url('http://localhost:3000');
  });

  it('can create a list @watch', () => {
    const initialCount = countLists();

    browser.click('.js-new-list');

    assert.equal(countLists(), initialCount + 1);
  });
});

View Layers

Your choice of view layers

Syntax

  • Blaze uses an easy-to-learn Handlebars-like template syntax, with logic like {{#if}} and {{#each}} interspersed in your HTML files.
     
  • React uses JSX, with which you write your HTML in JavaScript.
     
  • Angular uses HTML with special attribute syntax for logic and events.
     
  • React and Angular enforce a better component structure, which makes developing larger apps easier.

Community

  • Blaze has many full-stack Meteor packages on Atmosphere, such as useraccounts:core and aldeed:autoform.
     
  • React has 41k stars on Github and 13k npm libraries.
     
  • Angular has 11k stars on Github and 4k npm libraries.

Performance

  • Angular and React have had more performance optimization work put into them than Blaze and in general will perform better.
     
  • However, there are some cases when Blaze does better (for instance an {{#each}} over a changing cursor).
     
  • One test benchmarks Angular 2 as the best, followed by React and Angular 1, followed by Blaze.

npm integration

  • npm install react react-dom
  • npm install moment
  • atmosphere wrapper
  • meteorhacks:npm

Prior to 1.3

Meteor 1.3

What about Atmosphere?

In the future, there will be a time when all packages will be migrated to npm, but currently there are benefits to both systems

Data back-end

  • Any backend
  • Any client
  • Any language

Apollo Architecture

DDP vs Apollo GraphQL

Whats next ..

Meteor Guide

  • Available at http://guide.meteor.com/
  • Fully updated to 1.3
  • recommendations & best practices
  • structuring your modules
  • designing database schemas
  • picking the right UI abstractions

1.3 Migration Notes

Video Tutorial

Kahoot Quiz Time!

  • 7 questions in total
  • All questions are given 20 seconds!

 

Gloria Voucher

  • Use real names
  • 1st place
  • Answers all questions correctly
Made with Slides.com