kristianmandrup

crud.Delete = new Class(RacerSync,
  initialize: (@context) ->
    @callSuper!
    @getter = new Models.Get @context

  extend:
    create: (collection, ids) ->
      new @ collection: collection, ids: ids

  # validation not needed on delete!

kristianmandrup

/* FireBase Sync Manager */
var FirebaseSyncManager = {
  getSynchronizedArray: function(firebaseRef) {
    var list = [];
    syncChanges(list, firebaseRef);
    wrapLocalCrudOps(list, firebaseRef);
    return list;
  },

  syncChanges: function(list, ref) {

kristianmandrup

I always end up having a lot of projects and it quickly becomes a "bit of a mess" unless you follow some very strict conventions. Would be nice to have a tool to help lift that burden IMO.

Wouldn't even have to be specifically linked to ember projects, but just node based projects in general that follow the app/addon convention.

How would you structure your projects as they scale to a sizable number > 10 projects and > 10 addons of various types??

https://github.com/stefanpenner/ember-cli/issues/1822

Some basic design ideas follows ...

kristianmandrup

{
    "name": "emberfam",
    "dependencies": {
        "handlebars": "~2.0.0",
        "jquery": "^2.1.1",
        "qunit": "~1.15.0",
        "ember-qunit": "~0.1.7",
        "ember": "1.7.0",
        "ember-data": "1.0.0-beta.10",
        "ember-resolver": "stefanpenner/ember-jj-abrams-resolver#master",

kristianmandrup

Idea for a small *optimize* util to speedup project creation time and keep app footprint low

var emberDevDeps = ['body-parser', 'broccoli-asset-rev', 
  'broccoli-ember-hbs-template-compiler', 'ember-cli-ember-data', 
  'ember-cli-ic-ajax', 'ember-cli-ic-ajax', 
  'ember-cli-inject-live-reload', 'ember-cli-qunit express glob'
];

$ optimize link --all

kristianmandrup

/*
ratchet/
├── css/
│   ├── ratchet.css
│   ├── ratchet.min.css
│   ├── ratchet-theme-android.css
│   ├── ratchet-theme-android.min.css
│   ├── ratchet-theme-ios.css
│   ├── ratchet-theme-ios.min.css
├── js/

kristianmandrup

<!-- Sets initial viewport load and disables zooming  -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

kristianmandrup

// From http://goratchet.com/components/


<script type="text/x-handlebars" id="components/ra-title">
  <h1 class="title">{{yield}}</h1>
</script>

<script type="text/x-handlebars" id="components/ra-btn">
  <button class="btn pull-{{pos}}">
    {{yield}}

kristianmandrup

Usage

$ bower install appjs --save

Reference app.js and app.css from your application, f.ex from index.html

<script type="text/javascript" src="/bower_components/appjs/kik-app.js"></script>
<script type="text/javascript" src="/bower_components/appjs/dist/app.css"></script>

kristianmandrup

# models/post.js

import model from 'model-dsl'

Post = model
  title: attr('string')
  count: attr('integer')
  
# controllers/post.js