background preloader

Scalable JavaScript Application Architecture

Scalable JavaScript Application Architecture

Canvas + - Flash Pro & CreateJS Following that is the handleComplete method. 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. 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. First, if a random value is less than 0.01 (1% chance) then we create a new platypus, push it into our platypii array, set its display properties, give it a velocity, and add it as a child of the stage.

Code Conventions This is a set of coding conventions and rules for use in JavaScript programming. 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. 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. Blank spaces should always be used in the following circumstances: while (true) { Avoid excessively long lines. Use line comments. Is

Centiped testé sur. Flex to HTML5 Considerations The web application landscape has shifted rapidly in the past six months. 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. 1. Many developers will quickly become overwhelmed when examining the options for HTML5 web application frameworks. Within JavaScript you will find frameworks that differ greatly on each of these points. There are several key points to consider when making this decision for your organization: How documented is the framework? If your company is attempting to decide on an MVC architecture, I would recommend examining Backbone JS, Ember JS, Angular JS, and ExtJS / Sencha Touch. In addition, your team can augment the framework that you have chosen over time. 2. A DOM (Document Object Model) manipulation and AJAX library is an essential tool in JavaScript development. 3. 4. 5. Conclusion

Test plan Environement de dev. Frameworks 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. By b10b b10b

A beginner's guide Sophisticated JavaScript applications can be found all over the place these days. 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 <!

Related: