karlwestin

            {{#if yodlee.last-refresh}}
             last updated {{formatDate yodlee.last-refresh "fromnow"}}
            {{else}}
              {{#if attributes.last-updated}}
               last updated {{formatDate attributes.last-updated "fromnow"}}
              {{/if}}
            {{/if}}

karlwestin

define("models/accounts2", [
  "lib/local-backbone",
  "lib/local-underscore",
  "models/accountProgress"
], function(
  Backbone,
  _,
  progressModel
) {
  var FlatAccounts = Backbone.Collection.extend({

karlwestin

/*

reference: https://gist.github.com/karlwestin/a3a26d3a100f58cf4c5e

code below looks pretty innocent, on every event, 
we're calling our 'myHandler', after events finishes triggering.
we want myHandler to be called on the 'thing' object itself.
*/

var thing = _.extend({}, Backbone.Events, {

karlwestin

classnames
{
/* 
allgemeiner css kram von
http://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28\-45deg\%2C\%20rgba\%28246\%2C41\%2C12\%2C1\%29\%200\%25\%2C\%20rgba\%28246\%2C41\%2C12\%2C1\%29\%2050\%25\%2C\%20rgba\%28241\%2C111\%2C92\%2C1\%29\%2050\%25\%2C\%20rgba\%28241\%2C111\%2C92\%2C1\%29\%20100\%25\%29\%3B'
*/
background: rgba(246,41,12,1);
background: -moz-linear-gradient(-45deg, rgba(246,41,12,1) 0%, rgba(246,41,12,1) 50%, rgba(241,111,92,1) 50%, rgba(241,111,92,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(246,41,12,1)), color-stop(50%, rgba(246,41,12,1)), color-stop(50%, rgba(241,111,92,1)), color-stop(100%, rgba(241,111,92,1)));
background: -webkit-linear-gradient(-45deg, rgba(246,41,12,1) 0%, rgba(246,41,12,1) 50%, rgba(241,111,92,1) 50%, rgba(241,111,92,1) 100%);

karlwestin

Angular templates are very cool and all, there's jsut one thing im used to that im missing:

This is only about building/packaging your JS for prod

What i do today:

When i require a handlebars template with require.js:

require(["hbs!my-template"], function(tmpl) {
 //use the template in here 

karlwestin

var app = angular.bootstrap(document.createElement("div"), ["my-module", "ng"])
var $compile = app.get("$compile")
var compiled = $compile(myTmplString);
/*
compiled is a function, publicLinkFn, that is 2 steps away from seeing how any nodes look
nodes are accessed in a childNodes list, that can only be accessed by the compositeLinkFn
there's no access to a tree of the parsed template on the publicLinkFn
*/

karlwestin

    // from https://code.angularjs.org/1.2.19/docs/guide/unit-testing
    // under 'simple html element directive'
    
    // Whats the beef?
    // One of angular's flagship features, dependency injection
    // forces us to write clumsy **beforeEach clauses** leaks the instances one level up in scope
    // And the argumentation for the use of this weird DI is TESTING????
    // writing large test suites leaking variables one step up 
    // usually leads to making the impossible to run next to each other
    //wtf

karlwestin

    /*
    So it turns out angular writers are just half-familiar with jasmine etc practices
    angular-mocks actually supports doing this:
    */
    
    // Load the myApp module, which contains the directive
    beforeEach(module('myApp'));
    
    // Store references to $rootScope and $compile
    // so they are available to all tests in this describe block

karlwestin

There's 2 fundamental problems with most 'develop live in the browser' systems that i've seen. Note that the LightTable + ClojureScript combo is an exception from this, even though that requires writing your app in a certain way.

My general argument is not that it's impossible to do this. It is that there's a lot more complexity to exisiting JS apps, and for this to work as flawlessly as all those demos say, Apps need to be written with hot code swapping in mind.

1. Very simple site structures are assumed:

The mechanism itself for redefining a piece of code is not always so easy. Let's say your app is a browserify build. Sure, if you're redefining one (public) method on an object, you can find the object and swap out the method on the obj itself, or on its prototype. But how do you go about with more advanced patterns? Maybe a module is exposing 1 public method, that has 3 methods internally. That method is then passed as a value into other modules. Now all of a sudden, modules not only need to re-define

karlwestin

>
              <div class="block-item"
                  ng-repeat="field in institution.login | filter:notOptional ">
                <div class="rfz-view" ng-switch="field.type">
                  <input class="full"
                         ng-switch-when="text"
                         type="text"
                         placeholder="{{field.label}}"
                         name="{{field.key}}" />
                  <input class="full"