Tag: backbone

  • Javascript Framework/Library Reference

    Base libraries (animation, dom manipulation, event handling, ajax, utility)
    jQuery (this library is the most popular base library)
    Zepto
    Dojo
    Prototype
    MooTools

    Utility Libraries
    Underscore
    Lodash
    Sizzle
    Modernizr (feature detection)
    Yepnope (conditional loader)

    MVC Frameworks
    Angular
    Ember
    Backbone
    SproutCore
    ExtJS
    Batman
    Spine
    Meteor
    Exoskeleton
    ActiveJS
    StapesJS
    JS MVC

    View/Data binding frameworks
    Knockout
    CanJS
    React
    Rivets

    Backbone Libraries
    Thorax
    Epoxy
    Chaplin
    Marionette
    Quilt
    Backpack
    Rendr
    Backbone Boilerplate

    Templating Libraries
    Handlebars
    Mustache

    Widget libraries (animation, ui)
    jQueryUI
    YUI
    Bootstrap
    Scriptaculous
    Google Closure
    ShadowboxJS
    Lightbox

    Mobile libraries
    jQuery Mobile
    Dojo Mobile
    Sencha Touch

    Testing Libraries
    Chai
    Jasmine
    QUnit
    Mocha
    Sinon
    PhantomJS
    CasperJS
    Istanbul
    Karma

    Build development Libraries
    Grunt (task runner)
    Bower (package manager)
    RequireJS (module loader)
    Yeoman (scaffolding)

    Special use libraries (data-driven, graphics, maps, etc)
    D3 (document manipulation)
    Raphael (vector graphics)
    MediaElementJS (HTML5 video/audio)
    JPlayer (HTML5 video/audio)
    Leaflet (maps)
    ChartJS (charts)

    NodeJS Libraries
    Express
    MongooseJS
    BookshelfJS
    SocketIO
    Sequelize
    Sails
    Prerender

  • Backbone Apps, Express Apps, Client side unit tests, Korean, Gadgets, Videos

    Thanksgiving is coming soon, and these days it does seem like I need a break.

    What an interesting year it’s been for me. Multiple broken friendships/relationships, lost over $5k in parking fines, lost over $10k in stock options, multiple missed opportunities, a broken wrist, failed drivers test, I could go on. This year has not been one of my better years.

    Just two months ago, I posted about how Bitcoin was a good investment, but never took the time to actually invest in it (due to confusion about how to actually buy them). Well now, Bitcoin is over $1200 (it was $135 at the time I posted that). So a potential windfall opportunity has gone past me.

    These days, what do I have to look forward to? Just work, and study. Pretty much my life these days.

    Client side unit tests
    On the work side, I’ve been writing a lot of client side javascript tests recently, and its really made me more interested in them. Originally, I was not too fond of writing unit tests, as I felt them tedious, but now I find them kind of challenging. Jasmine is a popular client side testing framework, and getting it to work well with Backbone models, routers and views, is a good challenge. I’ve also been using libraries like SinonJS to mock/stub/spy out functions/objects, ChaiJS to unify the TDD/BDD style assertions, Karma as a test-runner, and Jasmine-jquery to test out dom events. Now I’m trying to mock out RequireJS dependencies (Squire.js/). It’s been a frustrating but enlightening few weeks trying to get my head around client unit tests.

    BackboneJS extensions
    Also, been trying to move from using string based templates like handlebarsJS into using dom-based templates. I really really want to get RivetsJS to integrate with BackboneJS so we have computed properties and data bindings (thanks to dom templating) but it’ll have to wait until we refactor all our handlebars templates to use Rivets Views instead. What other things do I recommend for a large Backbone app? Controllers and Container Views. MarionetteJS provides those. Also, use lodash instead of underscoreJS (It has more features).

    NodeJS / express
    I’ve really gotten around to liking NodeJS / ExpressJS so far. Using the ExpressJS API is easier than having to learn Apache modules and servlet containers and all that stuff. To be sure though, its quite different than the usual JavaScript you’d expect.

    Korean
    On the studying side, is my Korean getting any better? I’ve been taking classes now, and it feels like they focus more on writing and reading, which are traditionally the pillars of language education. Recently though, I’ve been subscribing to the Pimsleur approach of focusing more on speaking and listening instead. In fact, speaking and listening are the hardest things for me right now, and I constantly struggle when I listen to Koreans and figure out what to say. These days, I’ve been using korean dramas (a la drama fever) to study by listening, and repeating what the actors are saying and watching multiple times with and without subtitles. It’s an exhausting job trying to learn Korean when everyone around you speaks English and the opportunities to meet Koreans are few and far between, seriously. And it also doesn’t help that what Koreans speak and what textbooks teach you are different. For example, my Korean friends told me that 당신 and 실례합니다 are not often used in real life, despite being in the book as ‘you’ and ‘excuse me’.

    Gadgets
    I bought an iPhone5S, an iPad Air, and also have the chance to get Google Glass (as a BitTorrent developer) as well. What do I think? I really like the iPhone of course, as I tend to prefer smaller screens and the iPhone5S probably has the best camera in the business. The TouchID thing is pretty cool too. The iPad Air also surprised me. I didn’t think an iPad could replace my MacBook, but after using the iPad a few days with a bluetooth keyboard, I can honestly say that 90% of the things I can do with the MacBook (except programming), I can do with the iPad, and the iPad has LTE on top of that and only weighs 1lb so I can use it anywhere. Surprising, I might have to sell my MacBook.

    Anyways, I haven’t updated recently because my life is fairly mundane so far. I did upload several videos though, so take a look:

    San Francisco’s Hidden Gems (my friend helped me with this one):
    httpv://www.youtube.com/watch?v=P2lw-yKA0CA

    iPad Air vs Kindle Fire HDX
    httpv://www.youtube.com/watch?v=JtpXyh542L4

    Sony HMZ-T3
    httpv://youtu.be/avIEWVmFEZQ

  • Proliferation of Javascript libraries and bad start to the year

    Ah, good old O'Reilly Rhino
    Ah, good old O’Reilly Rhino

    As a front-end developer, I can’t help but notice all the innovation going on. Especially compared to the backend, I feel that front end technologies these days are developing at quite a rapid pace. In particular, the areas of HTML, CSS and JavaScript.

    HTML5
    HTML5 has of course been the hot technology as of late, which I regret not using more HTML5, because my company has to support legacy browsers like IE6/7 (which of course cannot support HTML5).
    “But Tong, why don’t you use Modernizr or another shim to take advantage of graceful degradation?”
    Well, the fact is that we are lazy, so we don’t want to rewrite a lot of our code for graceful degradation / progressive enhancement. And I’ve also noticed new templating technologies such as HAML, Jinja, JST, Mustache, and Handlebars, which uses JS to compile Handlebars templates, which itself is built on top of Mustache.

    CSS3
    Another area is CSS. Of course my company can’t use CSS3 for much of the same reason as HTML5; support for legacy browsers. Take note that like HTML5, CSS3 is continually expanding and browser support is very inconsistent (so just look to W3C for guidance for now). However, there is also much innovation in the realm of styling as well. There’s LESS, which extends CSS with variables, mixins, operations and functions, much like a scripting language, and SASS, which adds much of the same things. Then we have frameworks that build on top of LESS/SASS, like Compass.
    Notice how alot of new technologies are themselves improved or extended by even newer technologies, and so forth.

    jQuery
    Nowhere is this more evident than in JavaScript. A little bit of history: Netscape originally developed JavaScript to be a lightweight interpreted language for amateurs (ie. users of VB). They named it JavaScript to take advantage of Java’s popularity, not that the two languages share anything in common. It was very popular, and because Microsoft had their own standards of the language, it wasn’t standardized until the late 90s into ECMAScript. In the late 90s/early 2000s, JS was mainly used for light scripting events such as submitting forms, animating icons, etc. It wasn’t until DHTML and AJAX came about that JS really started to take off, especially with professional programmers.

    Hence, where we are at now. Ajax took off, and JS libraries (some may say polyfills) came out that significantly expanded JS’s use in everyday browser scripting. My company uses Prototype.js and Scriptaculous for UI. And certainly there were other popular libraries at the time like MooTools, and widget libraries like Dojo and YUI.

    But the most popular JS library that came out in 2006 that really started web 2.0 computing was jQuery. Every web developer knows it, and 91% of websites probably use it. Jquery made ajax applications and dynamic application scripting as easy as cake. Hence my point now is that 90% of libraries today is built on top of, using, or extending jquery. It’s so ubiquitous. Want some boilerplate for your code? Bootstrap uses it. Want to add some structure to your single page app? Backbone.js uses it. How about mobile? Well jQuery mobile has got you covered. And jQueryUI has most of your UI needs down. jQuery has become a foundation of modern JS frameworks and libraries.

    And now you can pretty much build your entire app, full stack, using only JavaScript. Rails developers can be more productive using CoffeeScript and Batman.js. BackboneJS, AngularJS and EmberJS have got you covered on your client side MVC needs. Need a utility library without Prototype.js’s namespace interference and object pollution? UnderscoreJS is there (while also being a dependency for Backbone). Modular JS components? RequireJS is there. Making vector graphics? Sure, RaphaelJS is there. UI widgets? How about Google Closure, jQueryUI, ExtJS, or the aforementioned YUI? Maps? Yup, LeafletJS handles that. Need just CSS selectors? SizzleJS does that. What about media overlays? Yes we have both ShadowboxJS and LightboxJS on each side of the force. In fact you can even build server side JS using NodeJS and SocketIO, as well as frameworks building on top of those, like ExpressJS. Mobile browsers? How about ZeptoJS, Dojo Mobile, or the aforementioned jQuery mobile? Or how about giving me a full stack framework like Meteor? And yes, JS can even compile templates on the client side without being horrible slow using Handlebars and JST. Unit testing frameworks similar to server side programming languages have appeared for JS, such as Qunit and Jasmine, themselves written in JS. And yes, there’s even JS Dependency Injection.

    All this to show that, there are way too many JS libraries out there. Not that its a bad thing, but it seems to have exploded recently. Backbone.js wasn’t released that long ago, and there’s already extensions like Backpack.js and MarionetteJS built on top of Backbone, which itself is built on top of jQuery, which itself is written in native JS. My concern is that modern front end devs are forgetting the important foundations of JavaScript and the native JS API, when they are using all these libraries which seem too magical and obfuscate how JS works. We used to DOM-script, now we have two way data bindings, which do updating and ajax calls for you. Soon, front end devs won’t even know what an ActiveX object is, or how to handle IE specific bugs, because its all done in the background. And its all happening a bit fast… what might be the hot library of today might be the legacy library of tomorrow… my company experienced this first hand using prototype.js… which at the time was as popular as jquery but now is used by less and less websites. This makes it all difficult for front-end devs to absorb, which libraries are considered the front-runners and will be viable in the future. Who knows? It’s a concern I have…

    HTML validation
    Thanks to my friend Chris (the Polish juggernaut) for this tip:
    [Unix commands] use xmllint –html *.html to check if your html document is well formed, but use tidy *.html for full on HTML validation. Little known unix commands, but useful.

    Other news
    And in other news, I’ve been having a terrible year so far, compared to last year. So far, in just January alone, I had:

    -At the very start of the year, the power on my Mac went out and all the pictures I took in San Diego on the Mac guest account were deleted and cannot be recovered (this is a “feature” of unix guest accounts and works differently than windows guest accounts).
    -alot of my good Korean friends went back to Korea.
    -lost 6k in stock market options (each time the market went the other direction – go figure)
    -pay $1340 in parking fines and traffic fines (because I had high beams on? geez)
    -had to come in late for work or missing from work many times due to the stress of my new apartment, mortgage loans, escrow, new bank, etc.
    -Didn’t get internet for two weeks due to no cable wiring
    -Didn’t have electricity in the living room for two weeks due to faulty circuit breaker.
    -Toilet cannot flush – now have to use the lobby restroom until a repairman fixes it.
    -washer and dryer doesn’t work – all my clothes come out smelly and unwashed
    -After doing tax returns, found out I owe the government $2600 in taxes.. ugh…

    So yeah. In one month, I had more bad news that all of last year. Happy year of the snake.