Get in touch with JavaScript
Some time passed since this Adobe public relation dilemma about Flex and Flash happened. Honestly, it hit me very hard. Exactly at this time, I was diving deeper into the Flex 4 Component Framework and tried to adapt my new knowledge to Flex Mobile. After some failures and misunderstandings I was on a good way and I was convinced that the (new) Flex 4 Framework is a real step forward for developing User Interface. For this reason, I got a little bit mad about the whole discussion of HTML5 vs. Flex. I expected that HTML5 + CSS3 + JavaScript will come, but not so fast and powerful. However, I got a good opportunity and checked what it is all about this new hype of web technologies. As a Flex and Flash Develeoper the transition to this open standard development approach is not very difficult, except the tooling is like from another planet. I had the feeling that finding the right tooling is as difficult as finding the appropriate life partner. There doesn't exist an one simple solution for everything like Flash Builder environment. In my case I recommend for writing Code to use the IDE Webstorm, for debugging I am using Firebug for Firefox. Whatever everyone has his own preferences, so decide for yourself what is the best.
There exist two blog article series, which were very useful during my learning of Webapplication development with JavaScript. I decided to use their recommend frameworks jQuery and Backbone.js. These JavaScript frameworks are very lightweight, well documented, and their communities are very big. Alternatives of this mentioned combination are the frameworks Sencha ExtJs and Google's Angular.
First of all, I highly recommend to get familiar with JavaScript itself. Yakov Fain did a great screencast about this topic Advanced Introduction to JavaScript. A simpler and not so deep version of learning the OOP basics of JavaScript was created by Lee Brimelow. After learning the basics of JavaScript I started reading the blog series JavaScript Architecture of Aaron Hardy. He gives in his series a great overview of the concepts of each framework and how these frameworks work together. After reading Aaron Hardy's articles I started reading the web application tutorial series by Christophe Coenraets. He explains nicely the Backbone.js framework on his small real life project wine cellar (part 2 | part 3). Especially the seperation of backend and frontend is very well explained. After reading part 3, you should definitely read his article about what he learnt from the comments of his blog readers. You will get a deeper insight of Backbone.js and good starting codebase for your own web applications. In this context you are also supposed to check the updated version of the wince cellar app with Twitter Bootstrap and his other app. Twitter Boostrap is a very useful User Interface Framework with very good collections of Layout-, Button-,List-, and other UI components. More or less everything that the Flex Framework offered us for UI development. In my case I also used HTML5 Boilerplate as a starting for my Web Application development, but I still have to figure out how it works together with Twitter Bootstrap.
After reading and checking all these lines of code, I was very happy about this first big step to JavaScript. Some stuff I really like (real-time editing of html and css withr firebug ) and the "Evil Javascript" attitude is almost gone. But in reality I think there is still a lot of work and much room for improvements in creating a real good JavaScript development workflow. At the end my result is:
- Surely, there exist better JavaScript Application Frameworks than BackboneJS, but their are so many and I am just happy with my solution 😉
- The Apache Flex Framework is still very strong for developing graphical User Interfaces and has still some significate advantages. For instance, I hate to deal with different browser interpretations, I hate to deal with how I import and use my JavaScript classes...
- For mobile and prototype development I will still use Flex, but for web applications I will improve and focus more on my JavaScript skills.
- I hope the people will get normal in their minds about this HTML5 hype. So that we can rationally discuss the new opportunities of HTML5 + JavaScript and Apache Flex. Don't let die a great technology just because of madness.
Joe Zim extended Christophe Coenraets’s Wine Cellar app and produced a really nice screencast series of Backbone.js and requrie.js
http://www.joezimjs.com/javascript/introduction-to-backbone-js-part-1-models-video-tutorial/
http://www.youtube.com/playlist?list=PLCE344BDBD8FAC282&feature=plcp
https://github.com/joezimjs/Wine-Cellar-Improved
By the way an also useful topic: Backbone.js (Sub)View Rendering Trick
http://www.joezimjs.com/javascript/backbone-js-subview-rendering-trick/
Backbone.js: Hacker’s Guide Part 3 (Backbone internal)
http://dailyjs.com/2012/08/02/mvstar-4/
Recently, I found some old very helpful links. These links provide you an orientation for the JavaScript MVC jungle:
Patterns For Large-Scale JavaScript Application Architecture
http://addyosmani.com/largescalejavascript/
Large-scale JavaScript Application Architecture
https://speakerdeck.com/u/addyosmani/p/large-scale-javascript-application-architecture
Little bit off topic but still very valid input for front-end developers
Designing a Secure REST (Web) API without OAuth
http://www.thebuzzmedia.com/designing-a-secure-rest-api-without-oauth-authentication/
Another nice article about transitions/animations and state management via CSS. I already thought about it that CSS can play the role of Flex State Classes. It is also worth to read the comments of this article. I don’t know if it is really so flexible…
Phillip Whisenhunt wrote on smashing magazine a nice article:
Backbone.js Tips And Patterns