background preloader

Investigation HTML/JS

Facebook Twitter

Technology. Javascript + - Scalable JavaScript Application Architecture. WebGL + - Closure Tools. Canvas + - Reviews of some MVC frameworks. UPDATE 1/14/2012: Added Batman.js and Angular.js due to popular demand and because they looked impressive.

reviews of some MVC frameworks

Over the last several months I have been in a constant search for the perfect javascript MVC framework. Driven by a dire need for the right level of abstraction and features, I have tried out - some more cursorily than others - every framework I could get my hands on. Here lies a brief synopsis of each framework. Lastly, I share the framework which I ultimately decided on. Specifically, the following four features are very important to me: UI Bindings - I'm not just talking about templates, I'm talking about a declarative approach to automatically updating the view layer when the underlying model changes. The Contenders Here is a table showing all of the frameworks support for the above features. Modules management. Backbone. Ember.js has everything I desire. Ember.js.

Points clés. Documentation. A beginner's guide. Sophisticated JavaScript applications can be found all over the place these days.

A beginner's guide

As these applications become more and more complex, it's no longer acceptable to have a long chain of jQuery callback statements, or even distinct functions called at various points through your application. This has led to JavaScript developers learning what traditional software programmers have known for decades: organization and efficiency are important and can make the difference between an application that performs great and one that doesn't. One of the most commonly used architecture patterns to achieve this organization and efficiency is known as Model View Controller (or MVC). This pattern encourages developers to separate distinct parts of their application into pieces that are more manageable. Rather than having a function that makes a call directly to the database, you create a Model to manage that for you. Ember has only one dependency—jQuery.

Application Models Views Handlebars Controllers <! EaselJS. Recent Updates Follow @CreateJS November 2014 Updates in preparation for next release (coming soon).New class model, with big performance increases October 2014 Lots of bug fixes and pull requests.New 'Extras' folder in GitHub with useful tools and classes July 2014 Major overhaul of Graphics to include a useful command pattern, and a big performance increase.Added Graphics.store() / unstore() The Story Why we built EaselJS About EaselJS EaselJS provides straight forward solutions for working with rich graphics and interactivity with HTML5 Canvas. Featured Projects Community Show & Tell. Ion Drift A port of the Flash game Ion Drift, b10b was able to build a CreateJS version in less than a day that hit target framerates on even the lowest devices, and outperformed ports to other libraries.

Arcade. Flash Pro & CreateJS. Following that is the handleComplete method.

Flash Pro & CreateJS

This remains almost identical to what was published, except that now it removes the Platypus instance that was on stage. We’ve also enabled touch interactions on our stage, so this game can be played on an iOS device. Quick Tip: In a more complex project, you’d likely get rid of the exportRoot , and add elements to the stage directly. This removes a layer from your display list, which makes elements easier to reference and performs a tiny bit better. Another important change we’ve made is to change the Ticker listener from stage to our tick function. Quick Tip: I’m keeping things simple here, but generally you should create a class that encapsulates your logic and register a method on it with Ticker, instead of polluting the global (window) scope.

Adding game logic The tick function is called 20 times per second, and is the heartbeat of the game. Finally, and very critically, we call stage.update(). Handling interaction. IDE. Validation du code. Code Conventions. This is a set of coding conventions and rules for use in JavaScript programming.

Code Conventions

The long-term value of software to an organization is in direct proportion to the quality of the codebase. Over its lifetime, a program will be handled by many pairs of hands and eyes. If a program is able to clearly communicate its structure and characteristics, it is less likely that it will break when modified in the never-too-distant future. Code conventions can help in reducing the brittleness of programs. All of our JavaScript code is sent directly to the public. JavaScript Files JavaScript programs should be stored in and delivered as .js files. JavaScript code should not be embedded in HTML files unless the code is specific to a single session. Whitespace Where possible, these rules are consistent with centuries of good practice with literary style. Blank lines improve readability by setting off sections of code that are logically related. while (true) {

Flex to HTML5 Considerations. The web application landscape has shifted rapidly in the past six months.

Flex to HTML5 Considerations

Due to Adobe’s changing view of the Flash Platform, many companies who have relied on technologies like Flex are looking to migrate to HTML5. This transition can be tricky both for an organization as well as its developers. Here are five steps that should be some of the first an organization takes in this process: Test plan. GWT + -

Études de cas