xjamundx

This is the follow up to a post I wrote recently called From Require.js to Webpack - Party 1 (the why) which was published in my personal blog.

In that post I talked about 3 main reasons for moving from require.js to webpack:

1. Common JS support
2. NPM support
3. a healthy loader/plugin ecosystem.

Here I'll instead talk about some of the technical challenges that we faced during the migration. Despite the clear benefits in developer experience (DX) the setup was fairly difficult and I'd like to cover some of the challanges we faced to make the transition a bit easier.

xjamundx

Backbone has models for both display state and server data. Views bind to models and respond to various events on the models.

Ampersand has have the concept of session data (for display stuff) and props (for server synced data) (http://read.humanjavascript.com/ch06-models.html)

Ember has controllers which "allow you to decorate your models with display logic" (http://emberjs.com/guides/controllers/)

React has state and props. State is local to the component (view) and props are immutable and passed down from a parent.

Relay Relay "By co-locating the queries with the view code...components can be moved anywhere in a render hierarchy without having to apply a cascade of modifications to parent components or to the server code which prepares the data payload." (http://facebook.github.io/react/blog/2015/02/20/introducing-relay-and-graphql.html)

xjamundx

Ways to think about errors

• this whole server is borked
• this user session is broken
• whatever action i just tried to complete did not work
• an error will happen if we continue, so let’s not
• who cares

Log level of various errors

xjamundx

// oj3 implementation
angular.module('odesk').factory('oj3', function() {
    return {
        widgets: odesk.mediator.widgets,
        trigger: function($scope, event, data) {
            // i don't know, we aren't an instance
        },
        registerWidget: function(name, $scope) {
            // this won't quite work, because $scope doesn't talk OJ3 events
            oj3.registerWidget(name, $scope);

xjamundx

$.ajax({
  url: 'https://www.odesk.com/',
  success: function() {
    $.ajax({
      url: 'https://www.odesk.com/',
      success: function() {
         // so much nesting
      }
    });
  });

xjamundx

// this will cause an infinite loop
var express = require('express');
var app = express();
app.get('/', function(req, res) {
  res.send(express.toast, "bla");
});
app.listen(2222);

xjamundx

"use strict";

exports.reporter = function(errors, data, opts, cb) {
  setTimeout(function() {
    console.log(errors.length ? "FAILED" : "OK");
  }, 50);
};

exports.reporter.async = true;

xjamundx

function updateSVG() {
    var el = document.querySelector('.icon-user');
    var style = window.getComputedStyle(el);
    var uri = style.backgroundImage;
    var svg64 = uri.replace(/^.+base64,/, "").replace(/\"?\)$/, "")
    var xml = window.atob(svg64);
    var hex = '#' + Math.floor(Math.random()*16777215).toString(16);
    var color = xml.replace(/fill="#[A-Za-z0-9]+"/, 'fill="' + hex + '"');
    var color64 = window.btoa(color);
    var colorUri = "url('data:image/svg+xml;base64," + color64 + "')";

xjamundx

define(function(require) {
	var Backbone = require('backbone')
	var template = require('text!../../template/newThread.html')

	return Backbone.View.extend({
		el: '#container',
		template: _.template(template),
		initialize: function () {
			this.render()
			var Contact = require('model/contact')

xjamundx

require.config({
  paths: {
    jquery: "lib/jqMobi.min",
    underscore: "http://underscorejs.org/underscore-min",
    backbone: "http://backbonejs.org/backbone"
  },
  shim: {
    'backbone': {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone',