Archive for the ‘Javascript’ Tag

Bristol JS talk – ReactJS & React Native

I attended another excellent Bristol JS talk last night. Bristol JS seems to be going from strength to strength every year with great talks and speakers appearing regularly, a growing community and a huge waiting list for attendance at most talks. The venues used are also lovely and there is frequently free beer and pizza. What’s not to like 🙂

IMG_9552.jpg

Jack Franklin talking about React JS

Last night’s theme was React JS – Facebook’s UI framework, which is definitely the coolest kid on the javascript block right now. Jack Franklin gave an excellent introductory presentation on React, how it works and how to get into it. It was an insightful and accessibly talk full of ideas on approach and some useful, simple code samples to show how React Components are structured and work together.

Next up was a lightning talk by David Moody about a very slick site he built in React. It used the Redux pattern to implement a very clever SVG zoomable 2.5D UI. Worth checking out….

Last up was Colin Eberhardt doing his talk – Geeking out about React Native. Colin gave some fascinating insight into how React Native works from a technical perspective and why you might want to use it. He compared it to other similar native mobile development options and explained some of its good points and bad points. Ultimately he felt confident that it had become a strong technology which has some legs on it and will probably be around for a while.

The talks were all filmed so expect links to these on the Bristol JS site soon.

 

 

 

Advertisements

Javascript Frameworks’ Longevity Article

An interesting article on the (lack of) longevity of js frameworks can be found here.

Developing E-Learning Web Applications in the Multi-Platform Digital Landscape

Foreword

My blog has been a bit neglected of late…. In the interest of turning this around I wanted to dust off an old entry that never saw the light of day. I wrote this piece in 2013 so things have definitely changed since then…. but a great deal of the content is relevant and useful, particularly to the e-learning scene. With this in mind, please read on 🙂

_______

Background

The Digital Landscape is ever-changing. Recently though, it has been changing faster than ever before. After a decade of Flash and desktop computers being the best tool and platform for delivering highly interactive e-learning content, we now live in a world where people are using tablets and phones more frequently than laptops or desktops. The once unstoppable, ever-present Flash player is in its sunset years having been mortally wounded by a certain blog article – http://www.apple.com/hotnews/thoughts-on-flash . Web-based Flash content won’t work on iPads, iPhones and other mobile devices and this is becoming a more frequent deal breaker.

Solutions

The question we are facing is, “How best do we continue to make exciting e-learning that can be reached by all of our users?” It’s a fascinating question and one that I have spent considerable time thinking about. The answer is that there are many ways to do this… but they all come with their own set of pros and cons. The challenges and problems are multi-tiered, interdependent, and the direction you take will relate strongly to your own needs, parameters and requirements:

  • Go Native – In some situations, building a native app is a great path, particularly in terms of performance and being able to use the devices’ built-in UI component libraries. But you’ll need to consider how to tackle deployment and security— do you have your own enterprise-level app store? Can you push your app to your users devices? How many platforms do you need to develop for?Can a cross-platform compiling solution like AIR(http://www.adobe.com/products/air.html) or Haxe(http://haxe.org/) meet your needs?How you will handle user-tracking when you are no longer in the domain of the LMS?And can your user base be covered with the platforms you are able to build the app for?
  • Use an RDT – Alternatively a Rapid Development Tool like Storyline (http://www.articulate.com/products/storyline-overview.php), Captivate (http://www.adobe.com/uk/products/captivate.html), Lectora (http://lectora.com) or Zebra Zapps (https://zebrazapps.com/) can be a good option, particularly for smaller projects on a lower budget. These products are able to quickly get a course up and running. But you want to be sure you are going to be able to leverage enough customizable power and excitement out of the end product and be able to actually achieve the interactive or visual complexities you desire. It may also be that the features you need are going to only exist in the Flash version of the RDT output or that the HTML5 output isn’t performant enough or only actually plays in a native app wrapper.
  • Flash – A Flash solution can still be a very effective option if you know your user base will be using desktops and not tablets, but this is a scenario that is happening less and less. In any case, you will get to use a powerful, stable platform perfect for generating highly-interactive web content.
  • HTML5 – For high-end, customizable, bespoke content that can work on anything running a modern browser (tablets and smartphones included), a straight HTML, CSS and Javascript solution is more and more frequently the strongest option.

Exploring the HTML Approach

For the remainder of this article I want to take a deeper look at the HTML approach. One of the benefits of this technology are that it can reach as many users and work on as many platforms as possible. It can also integrate into as many LMSs as possible, regardless of their TinCan API capabilities. The Javascript and HTML5 spheres of development have been on fire for many years now, with probably the biggest development community behind them, and so let’s take a look at the kind of elements you can integrate into your own e-learning framework by using these technologies. One of the common denominators of all modern devices and computers is the browser and with recent developments in HTML5, Javascript libraries and CSS3 you are able to deliver a cutting edge, high-performance product that works across many platforms.

HTML HTML HTML HTML HTML

Did you see how many times I wrote HTML just then? 5. HTML5. It’s big right now and it has been big for a while. It could be argued that there has been somewhat of a rose-tinted temporal distortion field around this word— but what does it actually mean? In essence, it’s a markup language designed to enable the presentation of multimedia content across the World Wide Web. It isn’t a final specification but currently a Candidate Recommendation of the W3C and its first public draft arrived in 2008. Some of the most exciting features include:

  • Video playback
  • The Canvas element
  • Drag’n’Drop
  • Offline web-apps
  • Web Storage

Say What?

A lot of confusion arises when people talk about HTML5 because quite often they are talking about other technologies like Javascript and CSS. HTML5 can do some new stuff and it’s exciting but actually most of the exciting stuff comes from Javascript libraries like jQuery and the new CSS3 bells and whistles—features like drop shadows, rounded corners and transitions. What’s more surprising, given the hype around HTML5, is that loads of really cool stuff can be done without it, instead just using HTML(4), Javascript and CSS. In fact, if you want to support IE7 and 8, these browsers don’t actually support HTML5 and so you must provide fallbacks or just omit functionality. I mention this because it’s critical to understand what is actually possible in different browsers when building interactive digital content.

The Technical Shopping List

Lets’ explore what’s possible within this approach. Here’s a list of desirable features to include in an HTML/Javascript e-learning framework:-

  • Multi-platform compatibility
  • LMS compatibility
  • High performance content
  • A seamless single-page application experience
  • On-demand loading
  • A structured, maintainable, modular codebase

The Nuts and Bolts

In order to achieve this I have brought together a number of technologies and libraries:

The technologies used in this e-learning framework - html5, css3 require.js, backbone.js, marionette.js, jQuery, Sass  and GSAP

The technologies used in this e-learning framework

  • HTML5 and CSS3 – See above
  • Require.js (http://requirejs.org) – This is a Javascript file and module loader. It’s helpful in two ways:-
    • Asynchronous Module Definition – Large web apps can contain thousands and thousands of lines of code. In our case these are predominantly Javascript files. It is common practice to list your needed js files in the header of the HTML page your site exists in. With larger sites, though, these lists of imported files can become very unwieldy, unmaintainable, and ultimately hard to debug. As projects grow it quickly becomes hard to tell what code you are missing, if you have the imports in the right order or where an error might be coming from. Require lets you define application level dependencies which can be accessed by any Require module. Require also lets you specifically list any dependencies that a particular module may need, a lot like importing classes in a Flash, Java, or Haxe class. In this way it becomes very, very easy to build discreet, modular, reusable and maintainable class files.
    • Web Modules – Large-scale web apps can be big and take a long time to download. Require lets you load Modules on-demand at runtime. This is key for large web-apps because it allows you to only load what you need when you need it. The user no longer has to sit and wait for everything to have finished loading, instead they can load the module they want to look at and access it as soon as possible.
  • Backbone.js (http://backbonejs.org) – Backbone is a Model View * framework for writing Javascript web applications. Backbone, as its name implies, is a bare-bones framework that provides the mechanisms for MV* OOP development without telling you how you should do it. There are now dozens and dozens of Javascript MVC frameworks out there―so many that it is impossible to keep up with them all. Backbone has been established for quite a while. It has one of the largest developer communities and one the biggest range of high profile use-cases. It may not be the most cutting edge or prescriptively powerful framework out there but it will be one of the most. Like many js frameworks, it is created alongside multiple js libraries. Backbone depends on jQuery and Underscore and ultimately it helps you create large-scale web applications in a modular, graceful way. It enables you to separate your visuals, data, and business logic into specific areas of code. For smaller sites it’s not necessarily worth using, but for anything sizeable with multiple developers working on the same codebase it can be a lifesaver. It will make your code cleaner, more reusable, more accessible for others to work on, and ultimately speed up the process of generating your application. Also, when it comes to re-using the same codebase across different platforms and devices, having your presentation layer separated out allows for much easier development because your data and logic don’t need to be changed. Ultimately it can be about budget and Backbone helps to keep the budget down.
  • Marionette.js (http://marionettejs.com/) – “Make your Backbone applications dance!” Marionette is a composite application library for Backbone.js. Essentially it is designed to add huge improvements to Backbone. Backbone is incredibly non-prescriptive. Marionette adds deliciously useful and valuable functionality to Backbone by extending the Backbone classes and adding a few of its own. It adds items such as:
    • A dedicated Application object
    • Module objects
    • A Controller class
    • Layout and Region objects
    • ItemViews and CompositeViews
    • The Vent object (which is a Global Event Aggregator)
    • Memory management and event killing

It also drastically helps reduce boilerplate code―this can save you a great deal of development time.

  • jQuery (http://jquery.com) – This is probably the most popular Javascript library in existence. It has revolutionized web development in the years it has been around by drastically reducing browser incompatibilities, making the DOM much easier to traverse and manipulate and generally simplifying the way people code websites. It provides decent event handling, has a solid Ajax API and allows you to control and bend the DOM to your will. I won’t say much more about it other than it’s amazing, and now, pretty much taken for granted.
  • GSAP (http://www.greensock.com/gsap-js) – The GreenSock Animation Platform is a truly wonderful animation library. It was arguably the best Flashtweening library out there(TweenMax/TweenLite) and it has been ported over to Javascript with much of its API intact.It provides many benefits:
    • It is fast― up to 20 times faster than jQuery’s animation library and even quicker than CSS3 animations and transitions.
    • Its browser compatibility is phenomenal. It will work well even with older browsers…even IE7.
    • Animate anything…scale, rotate, skew, 3D transform and move DOM elements, JQuery selectors, Canvas library objects or even individual CSS properties. You can even animate objects or arrays.
    • GSAP has it’s own Timeline engine which allows you to string together, append, merge or delay multiple animations into one Timeline object. This can then be paused, repeated, scrubbed or controlled in any way you like: very powerful indeed.
  • Sass (http://sass-lang.com) – This stands for Syntactically awesome stylesheets. Sass takes CSS and gives it a massive kick up the backside. CSS is great but CSS compiled with Sass is AWESOME!
    • Variables – Sass lets you use global variables in your CSS. No longer do you have to find and replace all instances of a color value. Instead, put it in a variable and if you need to change it, you only have to do it once.
    • Selector Inheritance – Want to apply specific styling rules to only the children of a parent class? No problem! Just inline those rules into your particular class and Sass will sort out the rest.
    • Mixins – Have a number of boilerplate style sections that you use everywhere? Set them up as a mixin and then just include your mixin wherever you want. Like the variable, this saves you a silly amount of time during the lifecycle of a project.
    • Operations – Sass allows you to put logic into your CSS and even concatenate data types to form selectors.
    • Compass – Sass can work hand–in-hand with the Compass framework to massively simplify your CSS3 style definitions. You no longer list out three or four separate lines of vendor-prefix CSS to achieve the same result cross-browser. Compass allows you to use single phrases for things like drop-shadows and rounded corners. It also lets you manipulate color values with ease by calling functions like darken or lighten and applying a percentage value.

And to sum up….

Ultimately the point of bringing about these technologies is to be able to generate exciting, powerful, dynamic and meaningful interactive experiences. The above approach tries to garner some of the best that is out there on the web and use it to generate products that work on as many platforms as possible. The high-end goal is to make interactive content as meaningful, valuable, far-reaching and memorable as possible. It’s also about doing so effectively and efficiently so that projects come in on budget and schedule.

IE8 Expected Identifier Error

Hello,

This bug gets thrown sometimes in IE8 and under and it can be caused by many things. I just got caught out debugging an error whereby a variable stored in some json was called ‘class’. The dev who made it was storing the css class name for an object that would get appended dynamically into markup. The json looked like this:-

“class”: “customer”

The issue is that “class” is a reserved keyword in IE. GIven this, the quickest and simplest fix for me was to just change the variable name to “className”.

 

IE7 and IE8’s indexOf() Array Bug

If you try to use indexOf() to check the existence of an Array member in <IE9 the script will fail. This is because the Array class in <IE9 does not have the function indexOf() built into it. This is not amazing.

To render this problem obsolete you could use the jQuery inArray() method, although then you are dependent on jQuery being in existence – http://api.jquery.com/jquery.inarray/

Or, alternatively you could just add indexOf onto the Array prototype if it doesn’t exist using something like this:-

// <IE9 indexOf() fix
if (!Array.indexOf) {
  Array.prototype.indexOf = function (obj, start) {
    for (var i = (start || 0); i < this.length; i++) {
      if (this[i] == obj) {
        return i;
       }
    }
   return -1;
  }
}

IE8’s Substr() Bug

I thought I would share this gotcha in the hope it saves the rest of the world some time. Here’s the deal……

In IE8 and below when using substr() to parse a string you cannot use -1 as the startIndex parameter: it will return NaN and error out. As an example, this will not work:-

var index = id.substr(-1, 1);

Instead you would need to do the following:-

var index = id.substr(id.length-1, 1);

 

Very small Yay!

Backbone.js – Nested Collections and Arrays

I have recently been wrestling with Backbone.js to get it to correctly parse nested collections. There are numerous ways you can do this including using the plugin Backbone Relational. However, if you just want to do it yourself without the plugin then this is the approach that I found worked for me….

I have a collection of models. Some of these models might contain a nested collection of the same models. In my JSON this is set up as an array. The issue I was getting was that it was remaining as an array and not getting parsed into the collection of models I wanted it to be. This was a problem because I was navigating through the data recursively and I wanted to be able to treat each model as a Backbone model and not just a plain old object.

My model class is called ShellMenuModel and my collection class is called ShellMenuCollection. The model attribute where the nested collection would live is called subMods. Here is the model code:-

Image

 

The key to solving this problem was using the initialize function to manually parse the collection. In this function we check to see if the subMods collection attribute exists, if it does exist then you instantiate a new collection and in the constructor pass in the subMods array. The collection then gets parsed into a collection and set up as the subMods attribute on the parent model.

My FITC Amsterdam 2012

Bike in Amsterdam

FITC in the beautiful city of Amsterdam



FITC Amsterdam

I recently attended my first FITC event. FITC is focused primarily on high-end digital creativity. The conference took place in the wonderful city of Amsterdam over the end of February 2012. It was an intimate affair for a conference, with probably around 400 attendees. There was a workshop day on Sunday followed by two full days of presentations over three or four strands. There was a well-engineered mix of technical and creative talks by some key industry figures as well as some interesting sneak-peeks and major announcements. I am going to highlight some of the most interesting and important aspects of the conference (but in no way am I trying to cover everything as there was just too much to go over, and you would probably get bored 🙂 ).

The Sunday Workshop

The Building Flash Games with Starling workshop

I attended the Building Flash Games with Starling workshop hosted by Adobe Developer/Game Evangelist @LeeBrimelow. We spent a day building a 2D game from scratch using the new Starling Framework. Starling leverages the new GPU acceleration possible in Stage 3D but presents it in an almost identical way to Flash’s normal display list. This makes it easy for Flash developers to create incredibly performant 2D games simply by importing from the starling library instead of the flash library. There are obviously more steps to writing truly performant games but essentially you can achieve an awful lot for very little and we built a simple physics game called Grenades.

Screenshot of the flash game Grenades

Grenades by @leebrimelow

To create Grenades we used the impressive and more-intuitive-than-Box2D framework Nape. We also covered spritesheets and physics models using the awesome apps TexturePacker and PhysicsEditor. Grenades is very similar to the omni-present Angrybirds and Lee Brimelow did a great job of slowly layering on the code until we had a couple of levels of the game functioning with scoring, sound and even a (Flash IDE-based) level-editor.

HTML HTML HTML HTML HTML (that’s 5 HTMLs)

FITC, I believe, used to stand for “Flash in the Can” but has now been changed to “Future, Innovation, Technology, Creativity”. And this change was also mirrored in the content of the conference. In the industry there has been a huge shift in focus and excitent away from Flash to HTML5. At FITC there were only a handful of actual Flash specific talks and by the end of day one it was easy to have had the HTML5 logo burned into your retinas. So this was an HTML5-heavy affair and with good reason. For a conference that has a large percentage of (ex?)-Flash devs and designers, the issue that a lot of us are facing is how do we continue to build on what we do in the current and continually changing digital landscape? HTML5 has been heralded as the next big thing for some time now and many of the talks covered the reality of this new technology. Clients are asking for content to work on multiple platforms, behave performantly and not cost much or any more. However, the reality of achieving these things is a far more complicated picture.

Games for Kids: Flash vs HTML5

Jon Howard, @swingpants, is the Web Development Team Leader for CBBC & CBeebies and is the lead for BBC Children’s Games strategy team. He kicked off Monday’s presentations with an enlightening talk on his own journey to provide performant highly-interactive content for multi-platforms. His work thus far has included many, many impressive high-end Flash games. But with mobile and tablet-device usage percentages growing by the day this delivery method is going to have to change. Working for the BBC, it is his mission to reach the biggest audience possible and in catering for the lowest common denominator he has had to make some tough decisions about what he can realistically achieve. He wanted to get as deep an understanding as possible during his research so he decided to not use any frameworks or libraries and just start coding in HTM5 and Javascript to make a simple platform game. The kind of game you might typically find in the CBBC website.

His initial path, for the graphics side of things, took him to investigate SVG as an alternative to Flash’s vector graphics strength but found performance was massively lacking. So…. he went on to look at Canvas which is getting more and more powerful at the moment. However, he found that Android devices were incredibly slow at rendering Canvas. This left him with using DOM elements to render the game world and eventually, through a process of line by line code optimisation, he was able to get something passable working across his four different test devices.

Other issues he ran into included Android’s inability to use multi-touch gestures in-game. The terrible reality of sound implementation across browsers. Often a single sound is only possible, even worse, on iOS a sound must be triggered by a button. It’s so bad in fact that in @jessefreeman‘s latest book, ‘An Intro to HTML5 Game Dev’, he surmises that with current browsers it’s probably best not to even include sound at all…… no sound in games? Not good. Webcam access is only currently supported by Opera. Video requires multiple codecs and fallback strategies. Jon also found that performance for specific browsers is, on different devices in areas such as SVG, Canvas and CSS transitions, completely inconsistent and changes in random unexpected directions with almost every release. In particular, this is a problem with auto-updating browsers like Chrome….. it will suddenly update behind the scenes and your work will be broken or will have ground to a halt.

Basically, it’s still very rough out there. Things are getting better across the board, but very slowly. His conclusion was that HTML5 is not yet worth pursuing to make cross-browser multi-platform high-level web games. He speculated that this may be the case for some time to come as browsers implement their own take on features, in their own time, with very loose ‘standards’. He wondered if cloud-based streaming solutions like Onlive might actually be the answer….

The Adobe Keynote

It was an exciting keynote from Adobe. They have re-focused their direction for the Flash Platform towards high-end gaming and video. Flash’s name is mud right now and could be forever so there is an element of too little too late to a lot of this but what they were showing was truly impressive.

  • AIR 3.2 finally has Stage3D hardware accelerated 2D and 3D running on mobile. They demoed a number of games running on mobile devices with truly impressive performance. Many thousands of sprites running at 60fps. There was a look at the incredibly performant framework Genome2D. Here are a few of the AIR demoes to check out – http://www.flashstreamworks.com/2012/02/28/five-air-3-2-stage3d-mobile-demos-that-will-knock-your-socks-off/
  • Multithreading is almost here.
  • New mouse capabilities are ready, including mouse-lock and full right-click control.
  • There were some excellent Air Native Extensions allowing you to leverage device specific functionality not available in the AIR runtimes.
  • They demoed the latest version of Unreal Engine running in Flash (through Alchemy). It is actually running better than on some modern day consoles. It was very impressive to see how far Flash has come. Many large game publishers are now starting to produce console-quality web content with the new Flask player capabilities. It was noted that although these super-high-end features are not necessarily relevant to a lot of people’s day-to-day work, the power and performance will trickle down to be leveraged in more common situations.
  • Monocle is a Flash profiler that was announced a few months ago. It is going to run on top of release-version flash content and allow you to analyse each individual frame of a flash movie, you can click in and out of functions, manipulate the timeline to view any state of your application and pinpoint exactly where memory or performance issues may be occurring. It even works with Stage3D.
  • Hellcat is Adobe’s name for a future edition of Flash Pro. It’s 64-bit rewrite allows for some impressive performance and realtime rendering in the IDE, also a 2 second load time. All this is great…. but I would rather just have an IDE that isn’t riddled with bugs and frequently crashes.
  • Adobe Edge has now reached preview 4. It’s becoming an interesting tool for more basic end-to-end HTML5 visual solutions with limited interactivity. I’m not sure what kind of code is being generated under the hood but some of the latest examples were impressive.
  • The most exciting announcement for me was the inclusion of part of Grant Skinner’s amazing CreateJS framework as an extension in Flash Pro CS6. This feature will allow designers to output complex vector-based canvas animations direct from the Flash IDE as .js classes. I am going to write a separate blog post imminently with much more information specifically on CreateJS.

The view from the Influxis Voodoo lounge

Conclusion

For me personally, to make a snapshot of the technical mood of the conference, I would say this….. The digital landscape is changing fast, the dominant years of Flash have passed and we need to figure out how to do what we have done so easily in Flash in different technologies and on different platforms. The hype would lead you to believe that HTML5 will be able to solve everything but the reality is very complex and there are problems with performance, compatability and standards at almost every turn. Allowing one company to spearhead a web technology is dangerous in terms of ownership and control but it does allow for significant progress. Compare this to the slow-moving and differing implementations of standards by the multiple boards, committee and companies responsible for the current set of browsers and it’s easy to long for what seemed like a simpler past. However, that would be to ignore the excitement and challenge of developing in this new realm.

In terms of solutions, people are not sure what the right direction to take will be yet. There often isn’t a single clear choice but there are many breathtaking new frameworks, languages and technologies coming into play. I have been looking very seriously into haXe NME recently and it’s exciting and full of potential. I want to also look much more seriously at CreateJS as it reaches version 1.0. There is also other impressive tech such as Sencha, Phonegap and Spaceport, to name a few. In terms of performance, there is no denying the incredible ground being covered at the moment. Almost every week brings an improvement to the rendering and performance of mobile devices’ browsers. Soon, this won’t be the issue that it is now and this will give developer’s more choice and freedom. These are, without doubt, exciting times to do what we do.

I left out a great deal from this conference…. Grant Skinner’s awesome ‘HTML5 in the Trenches’ talk (which I’ll cover in my upcoming CreateJS blog), some excellent talks, presentations and free beer in the Influxis Voodoo lounge, the incredible atmosphere and friendly nature of the participants, Seb Lee-Delisle’s presentation ‘CreativeJS: Visual fun with Javascript’, as well as his ‘Conversation with Mr. doob’, an excellent opening party at the Sugar Factory, and basically, being in the beautiful city of Amsterdam. For anyone looking to go to a brilliantly inspiring, educational and valuable conference for digital creatives, this is right up there with the best of them. It’s like a musical festival for geeks! I will definitely try to come back again.