Advanced JavaScript with EmberJs

At the top of the JavaScript MVC world there are a few heavy hitters, Ember is one of the most comprehensive frameworks available and is about to be released for production use (currently at RC3).  

I will be presenting on Ember for the West Texas Ember Meetup and the Lubbock Software Developers group this Thursday evening from 6:30-8PM.   The keys to Ember are in their philosophy of conformity over configuration and embracing DRY (don’t repeat yourself) practices for building ambitious applications.  I will show you how, the tools to use, and even some bonus round material like Bower and Grunt.

1.  Quick Ember history
2.  The JavaScript MVC Matrix
3.  Ember Ecosystem: Resources, Projects, Tools, and People that make it up
3.  Building Controls, Widgets, Snippets, and complete Single Page Apps (SPA)… now
  – Quick API overview
  – Code Walk real-world implementations of:
      * Application and Namespace Structuring
      * Client Side Routing / Router
      * State Management with State’s and StateManager
      * Model Data (object models, JSON aggregation, enumerable objects)
      * Views (layouts, basic, collectionviews, containers)
      * Controllers (arraycontrollers, controllers, proxies)
      * Events (touch, any event hooks, dragNdrop, etc, observers, instrumentation)
      * Mixins (yeah, the sprinkles on your tasty treat – validation, CSS3 effects, logging)
4.  The Application We Just Built (github, preso location)
5.  BONUS ROUND:
     - GruntJs (lint, minify, watch, live-reload your code in real time)
     - Bower (if you like bootstrap twitter has a package mgmt platform too ya know)
     - SocketStream (node,web-sockets, middle-ware via express/connect etc, redis, stylus)

AngularJs vs EmberJs vs BackboneJs

There is much to do out in the wild about which javascript MVC frameworks are the best.  I see everything as an opinion and you all know what they say about opinions…..

So my question is, where is the proof?  To say it takes less lines of code to do something in Angular is easily answered in Ember by putting all your properties in one line of code.  ”Splitting hairs, we are.” – Yoda.

There has to be some benchmarks out there that actually show the difference between Angular and Ember in a matter of fact, not opinion.  So, where does this exist and if it doesn’t then maybe it is time to profile a full and complete Angular Application against the same Ember Application.  

Ember has their performance benchmarks against Backbone that nullifies that question, so on to the next….

Ember CSS3 FX Repo on Github

Yesterday while chilling out at Starbucks, there’s an oxymoron for you, I decided to start working on my presentation for the Lubbock Software Developers Group this coming Thursday….

I didn’t get far before the second quad venti white chocolate mocha kicked into high gear and I was tweaking cool CSS3 FX right into my views.  This is going to be a port of a very cool CSS3 sample I trolled across and I have bigger plans to extract a ton of this into a mixin and use fixture data to represent the from and to css values BUT hopefully somebody will find some value in this prior to that happening.  Here is the link, enjoy:

http://willcode2surf.github.io/ember-css3Fx/

 

EMBER4TWEEPS

EMBER4TWEEPS

EmberJs StarterKit fork for listing tweets from tweeps for whatever topic you want to search by.

EmberJs 1.0.0 RC3 Update

*Ember 1.0.0-rc.3 (April 19, 2013)*

 

* fn.call is wasteful when the thisArg is not needed.

* dont needlessly close-over and rebuild insertViewCollection

* Don’t apply href to LinkView that isn’t using ‘a’ tag

* Documents {{linkTo}}

* Include ember-testing in full build

* Use `jQuery.is(‘:disabled’)` instead of `jQuery(‘:disbled’).length` for Opera

* Remove assigned but unused variable

* Document run.scheduleOnce, truncate run.once docs. Fixes #2132.

* fix failing tests for outerHTML fallback

* don’t rely on EXTEND_PROTOTYPES == true

* Fixes Ember.EnumerableUtils without extend prototypes

* Do not flag .generateController for documentation.

* Do not build the docs for `.cachable`. Fixes #2329.

* cleanup MutableEnumerable documentation

* Add Ember.Application#removeTestHelpers

* Fix a couple issues

* First pass of work for the ember-testing package

* Fixes error in documentation referring to non-existent ‘Customizing Your Bindings’ section

* Fix method comments

* Fix redirecting to child routes

* Fixes to MetamorphView’s DOMManager replace

* Fixes #870 Lazy destruction + App#reset issues

* Eliminate unused variables

* Point to updated preconfigured starting points for JSFiddle/JSBin with latest Ember build that is now being auto-posted to builds.emberjs.com

* Fixes #2388: Added if statement to _resetSubControllers

* scope cached state transition hashes to the state manager class, so extending and mixins work with StateMangers as expected

* Fixes for upload of published builds.

* Update to latest ember-dev so that publish task can work properly

* Configure Travis for automatic deploy to AWS

* Add missing item type

* Do no emit Ember.alias deprecation warnings during alias tests

* add invokeRecursively to ViewCollection

* Failing test showing StateManagers using mixins to get some of their states have unexpected behavior

* Fix HistoryLocation rootURL handling and webkit workaround

* Remove unused argument from helper functions

* Use `toArray` to remove duplication

* Allow option view for Ember.Select overwritable

* Actually make Ember.alias() print deprecation warnings.

* use “Ember.String.fmt“ instead of String extension

* automatically upload all passing builds to s3

* [Fixes #2424] App#reset

* s/nexts/these (nexts is not a word)

* More verbose error message on failed linkTo routing attempts

* viewName is a property

* remove uneeded closures

* JSDoc should use {*} for mixed types instead of {anything} and {any}

* add an “includeSelf” parameter to “invokeRecursively”

* Fix ArrayController#length when content is not explicitly set

* Close #2043 – fix issue with removing last element in collection

* Stop application template from duplicating on re-render

* assertion to catch mixins being passed to Object.create

* Enhance Ember.TargetActionSupport and introduce Ember.ViewTargetActionSupport

* fix {{textarea}} assert message

* Test for unwatch methods on object length property

* Tests for watch methods on length properties

* Test for isWatching on length property of an object

* Move Ember.typeOf to metal

* Fix array watching issue. Was affecting more than just plain arrays due to differences between typeOf and isArray.

* Remove mention of passing mixins to create.

* Revert “Fix Application#reset destroy issue”

* Fix view helper documentation and example to reflect context

* Ignore webkitStorageInfo during namespace lookup to avoid warning

* Fix Application#reset destroy issue

* Make Chrome initial popstate workaround account for rootURL

* Use a string instead of an array in RenderBuffer

* Convert a for in loop to a plain for loop

* Improve view container lookup performance

* remove uneeded asynchrony from Ember.Deferred tests

* remove unneeded asynchrony from routing tests

* Add {{text area}}

* Default text input action to ‘enter’

* Add {{input action=”foo” on=”keyPress”}}

* More metal cleanup

* Better organize ember-metal and cache function lookups.

* remove sync from render to buffer

* make tests not depend on synchronous change events

* fix test not to expect synchronous observers

* Define Mixin properties in prototype

* Update ember-dev gem to latest version

* Share empty arrays in Ember.View prototype. Lazily slice it upon manipulation.

* Add views to Ember.View.views upon insertion in DOM rather than on init. Fixes #1553

* Make object destruction async so we can reduce churn when destroying interconnected object graphs.

* Define Ember.CoreObject#willDestroy. Fixes #1438.

* cleanup unneeded volatile()

* Match the transitionTo APIs.

* Avoid recursively calling transitionTo.

* Improve the performance of view notifications and transitions.

* Extract a private ViewCollection class to aid in manipulating several views at once.

* Add support for {{input type=”checkbox”}}

* Add Ember.Handlebars.helper

* Add {{input type=”text”}}

* Insert adjacent child views in batches rather than individually.

#emberdata and lots of tears

Ember Data should not be a requirement to go live. If you are using Ember Data why can’t you do a few things to put that keyboard to use for reasons other then complaining.

1. Write your own adapter.
2. Contribute to Ember Data and make a pull request.

Ember without Ember Data is still Ember and a very capable, flexible, and DRY framework. Just like a Ford Mustang is still a sports car EVEN if it is not a Mustang GT. The GT will come soon enough (data) and the Shelby Cobra will be next (bower package integration i hope).

These guys have said for some time that the adapter that ships with Ember Data is production ready but the entire project isn’t. If you have been developing with Ember the last year then the state of the data project shouldn’t be a surprise If you are building an enterprise Ember application (and you are NOT if your WAITING on someone to do work for you instead of finding a solution) then you are probably in the category of Ember dev’s who would like to see a modular approach to Ember and not build in dependencies you may or may not use. Keep it modular, releasing without Data and then packaging it all in will show the best way to build Ember packages that enterprise apps will need.

If it is a silver bullet that will solve all your framework woes is what you are looking for then I heard Microsoft has a real lean and mean thing called .NET and it ships with the shiny Entity Framework (only took them 4 years to get EF4 to EF1 promises so Good luck with that mess)

EmberJs RC2 Updates

*Ember 1.0.0-rc.2 (March 29, 2013)*

* Improved the App initialization process and deprecated Ember.Application#initialize. If you were using this, use deferReadiness and advanceReadiness instead.

* Added support for Ember.Application#then which fires similarly to the isReady hook

* Added more Ember.computed macros

* Added readOnly flag for computed properties

* Enumerable#compact now removes undefined values

* Fixed issue with unregistering actions on virtual views

* Make Ember.LinkView public

* Add support for jQuery 2.0

* Support browsers (FF 10 or less) that don’t support domElement.outerHTML

* Made it easier to augment the Application’s container’s resolver

* Support tag as an alias for tagName in the {{view}} helper

* Add ‘name’ to attributeBinding for Ember.TextField and Ember.Select

* Return merged object from Ember.merge

* Deprecate setting tagNames on Metamorphs – Refs #2248

* Avoid parent’s implicit index route clobbering child’s explicit index.

* App#reset behaves more closely to App#create

* Make Evented#on, #off, and #one chainable

* Add basic implementation of allowedKeys for the {{action}} helper

* Improved Ember.Array#slice implementation

* Fix ArrayProxy arrangedObject handling – Fixes #2120, #2138

* Added ability to customize default generated controllers and routes

* Better HistoryLocation popstate handling – Fixes #2234

* Fix an issue with IE7

* Normalized Ember.run.later and Ember.run.next behavior.

* Fix issue where classNameBindings can try to update removed DOM element.

* Ember.Array methods always return Ember.Arrays

* RSVP is now exposed as Ember.RSVP

* ObjectProxy does not attempt to proxy unknown properties on create

* Can now set ENV.LOG_VERSION to false to disable version logging

* Ember.ArrayController#lastObject no longer raises when empty

* Fixes to {{render}} helper when used with model

* Improvements to {{linkTo}} controller handling

* Fix {{bindAttr}} when targeting prop in {{#each prop in array}} – #1523

* String#camelize lowercases the first letter

* Other miscellaneous bug fixes and documentation improvements

For the full release see https://github.com/emberjs/ember.js/blob/7e012d9e7f4c5e5b7ce6e60307aac7cd653df5b9/CHANGELOG#L1

Getting EmberJs, got it?

Lot’s can be said about the various frameworks that are ready for the big show.  We could have a session a day dedicated to a different framework but why confuse the hell out of you?

There are a few frameworks that really allow you to make magic happen and scale in ways companies have not seen in a while….. WHEN USED CORRECTLY!!!  AngularJs, EmberJs, Knockout, etc all have slivers of difference between implementations but the key thing to remember is the objective is the same, make bad ass web applications with as little as code as possible.  DRY DRY DRY, that is a great philosophy to code by [Don't Repeat Yourself]

If you are repeating yourself then you are probably writing a ton of boilerplate code to shim an EmberJs project together.  No sir!  You are begging for weird bugs, terrible maintenance  and low developer adoption because you cannot clearly demonstrate how this pile of code is better then what is happening now at your place of work.  Don’t sell yourself short by ending your push to get HTML5 into your enterprise by executing on a great idea, with a great technology, before you even think it out.

Personally, EmberJs is the best of breed for my approach of development.  AngularJs is creeping up on that title and I will port some apps to Angular this weekend to see how that goes.  I will report back if it is worth it.

For now I want to help those who are dabbling with different frameworks and have heard of EmberJs -OR- you jumped on EmberJs and the project has not been as fruitful as you had anticipated.  If you have researched any JavaScript frameworks to jump start HTML5 development and embrace the NodeJs era, then you have seen the endless ToDoMVC jazz online.  I always have people telling me what to do, the last thing i want to waste my time on is improving a way for people to track these things, no, I want to see something that covers a few critical concepts and technologies that will make your project awesome.

The majority of all the ember projects that you will find on github are outdated, not recommended, deprecated, etc.  On top of that the development efforts that has gone into most is lacking at best and the implementations vary wildly.  I am actually surprised that some of the projects I have reviewed were presented to groups of developers… WTH!  Teaching people the incorrect way to hack around EmberJs is not a good idea.  

That said, I am putting together a sample project for my developers to get used to correct ways to use EmberJs, NodeJs, SocketStream, with Bootstrap and….wait for it, Bower, a package/component manager.

Whaaattttt….. modularizing an EmberJs application…. check!  This is EmberJs the way I like it, magic on magic.  Some basic scaffolding for testing as well as linting, etc, are all here in this project.  I am going to do a separate post about the actual project and walk through the main concepts you will take away, should be your boilerplate for a realtime emberjs app next time you start or convert a project.

Oh yeah, happy coding and have an awesome FAT TUESDAY!!!

The LSDG Christmas Project

The Lubbock Software Developers Group (LSDG) will have the finishing touches put up tonight at our host nonprofit for this year (Family Counseling Services 5701 Ave P). It is rewarding to see and hear about the positive impact this project will have on people that are part of their outreach program. It will also be a platform for us to coordinate other donations and support other initiatives going on around town.

You will see some stuff on Facebook, hear about it on FMX or see it on the news, etc, etc. When you do, take some time to see what is happening and how you can help our initiative even if you aren’t a geek. We need everyone’s support and exposure so that we can service and support the hardworking nonprofits that make this a great place to live. 

So what do we need? LED Christmas lights!!!! If you would like to donate some or have a garage full of outdoor Christmas decorations one of our volunteers would gladly pick them up. You could also drop donations off at couple other locations (Family Counseling Services and/or ARMtech Insurance Services). We will kick off the light show and Christmas extravaganza this week but will be taking donations and adding to the show daily. The more the merrier!!! Merry Christmas everyone!

REDIS Quickstart

REDIS Quickstart

This is always a goto page when dealing with redis.