The post has a peculiar title because I had a quite heart warming one when I went through the Workstreamer blog. Theres a post titled 'What Does Your Workspace Say About You?' and that just jots down a instance where a desktop uses the Workstreamer client. It feels so much refreshing when something that you have done goes out in the open. The whole stuff was created from scratch and I also had the help of the twitter client snitter (code). The Open APIs where also designed and with the help of my dear friends Abhilash, Rohan and Abhijat.
I also found that Workstreamer had a community in Facebook. There are pictures with me in it too. Extreme right here.
Nice to be part of a great team. KUDOS !!!
Showing posts with label workstreamr. Show all posts
Showing posts with label workstreamr. Show all posts
Wednesday, June 11, 2008
Tuesday, April 22, 2008
AIR again
In a previous post of mine I had briefly jotted down what I liked about AIR and how it all came together for Workstreamr. This time around I would like to write about some of the problems I had to face when coding in HTML , Javascript, CSS (AIR application) and how I managed to find a way about those problems. I would especially like to thank Snitter for developing a great product in HTML/Javascript/CSS so that learners like me could evaluate and understand the product.
I initial idea was the same as any other Open API system. Access data using certain credentials via http, parse and interpret the data, format the data and then display the data. So my primary concern was to separate the modal/controller/view layers that come into picture. The javascript files were written using the prototype library and the effects (even though little) were done using scriptaculous. After defining the stuff that I wanted, I went on to make managers (like sound manager) and providers (like htmlcreator which gave me the html designed code when I gave a json). The main application was the launch pad for all the other Javascript classes.
The application required a modal window and an accordion. The Modal Window was created with Controls.Modal in mind but I simplified it a bit. The Accordion was inspired by accordion.js found in scriptaculous. The Modal window had problems loading the first time as AIR had issues attaching/running events after the window is opened. So what ever code you are going to write you better initialize it first. eg - The eval execution is limited in the Sandbox Application and Prototype uses evalScripts for all insert statements.
The posts that I displayed had links in them with hrefs. Now if I had left them as it were, as soon as a user clicked them, they would open in the same window as the application. To open links in you default browser window you will have to use
As the eval function accessibility is limited the passing of a string to settimeout/setinterval is also not allowed. The way around is to actually pass a function/function name to this
I also juggled around naming divs in such a fashion that it becomes easy to get details in a certain fashion. Say I needed a user id when I clicked a checkbox. This generated checkbox could be given an id something like 'user_22_message_3242', so that parsing/splitting it and finding out the user id was a piece of cake. I cannot think of a better way than this. :)
Icon tray setting up was also a great feature that AIR offers. But be careful when you aim for the MAC as well. A specific check is required to see if there is dockicon support else when you minimize the window, the whole application may disappear.
The other thing which gave me some problems was the notification system (Growl). Now AIR does not support this but we make the application have this by using certain actionscripts. I looked through the actionscripts that Twhirl and Snitter uses. You could write your own script if you want the customization. We will have to tell AIR to add this in the path as well by doing a script include
The theme manager was another thing that I loved doing. As of now the theme manager loads a predefined xml file with all the theme details in them and on changing the selected item in the list displayed, it changes the CSS file which dynamically loads the theme. The images are also maintained in this theme folder so that a uniformity is obtained. The sound implementation was pretty easy. It only plays mp3 files(as I understand) but thats ok.
The development time required for an AIR application with HTML, Javascript and CSS is quite rapid. This client was developed within 1.5 months (I had other work as well). It has a great platform support (even linux now!!) and I expect a lot of verified AIR Applications to come up pretty rapidly.
I initial idea was the same as any other Open API system. Access data using certain credentials via http, parse and interpret the data, format the data and then display the data. So my primary concern was to separate the modal/controller/view layers that come into picture. The javascript files were written using the prototype library and the effects (even though little) were done using scriptaculous. After defining the stuff that I wanted, I went on to make managers (like sound manager) and providers (like htmlcreator which gave me the html designed code when I gave a json). The main application was the launch pad for all the other Javascript classes.
The application required a modal window and an accordion. The Modal Window was created with Controls.Modal in mind but I simplified it a bit. The Accordion was inspired by accordion.js found in scriptaculous. The Modal window had problems loading the first time as AIR had issues attaching/running events after the window is opened. So what ever code you are going to write you better initialize it first. eg - The eval execution is limited in the Sandbox Application and Prototype uses evalScripts for all insert statements.
The posts that I displayed had links in them with hrefs. Now if I had left them as it were, as soon as a user clicked them, they would open in the same window as the application. To open links in you default browser window you will have to use
air.navigateToURL(new air.URLRequest('http://google.com'));Sanctifying this was necessary as we did not want them to load in the same window. Adding an onclick event to the got post/message wont do any good here as the evalScripts will not be executed after the prototype insert statement. Snitter does a work around this by attaching an event listener for the whole area where the message displays. Checks whether its a link type, if yes issues this command. The problem that I faced still was even though I returned false from that method, the link open in the same window. The change that I did was that I took the href attribute value and put it in the alt attribute and cleaned up the href attribute value.
As the eval function accessibility is limited the passing of a string to settimeout/setinterval is also not allowed. The way around is to actually pass a function/function name to this
polling = setInterval(function(){alert('getting');},timeout);There were also CSS based minor issues. As you see in most of the twitter clients, when the user hovers over the avatar, he sees a envelope which he uses to send a direct message. I thought of doing it the JS way but then some clever CSS caught my eye. If you consider the image to be in a div and the sub envelope image to be in a child div then the CSS would be like
.child {visibility:hidden;}which I think is brilliant.
.parent:hover .child{ visibility:visible;}
I also juggled around naming divs in such a fashion that it becomes easy to get details in a certain fashion. Say I needed a user id when I clicked a checkbox. This generated checkbox could be given an id something like 'user_22_message_3242', so that parsing/splitting it and finding out the user id was a piece of cake. I cannot think of a better way than this. :)
Icon tray setting up was also a great feature that AIR offers. But be careful when you aim for the MAC as well. A specific check is required to see if there is dockicon support else when you minimize the window, the whole application may disappear.
nativeWindow.minimize();Always do an ordertofront after you restore the main window. This will make the application better and sane.
if(!air.NativeApplication.nativeApplication.supportsDockIcon) { // Fix for Mac
nativeWindow.visible = false;
}
The other thing which gave me some problems was the notification system (Growl). Now AIR does not support this but we make the application have this by using certain actionscripts. I looked through the actionscripts that Twhirl and Snitter uses. You could write your own script if you want the customization. We will have to tell AIR to add this in the path as well by doing a script include
<script type="application/x-shockwave-flash" src="notification.swf">I wanted a clean interface without those Adobe AIR based controls so I went for the transparent -true, chrome- none and visible -true configuration in the main file. This also requires that you have the close control (as in a image which calls the close routine).
</script>
The theme manager was another thing that I loved doing. As of now the theme manager loads a predefined xml file with all the theme details in them and on changing the selected item in the list displayed, it changes the CSS file which dynamically loads the theme. The images are also maintained in this theme folder so that a uniformity is obtained. The sound implementation was pretty easy. It only plays mp3 files(as I understand) but thats ok.
The development time required for an AIR application with HTML, Javascript and CSS is quite rapid. This client was developed within 1.5 months (I had other work as well). It has a great platform support (even linux now!!) and I expect a lot of verified AIR Applications to come up pretty rapidly.
Friday, April 11, 2008
Mixed Ideas
The Workstreamr team had a party yesterday. Geoffreys was the venue. Ben was the host and we reached a bit late after the delayed travel. The party had already started when we had reached there and we started out with a Corona each. Abhijat was fasting and did not have any alcohol. Amol joined us later when we ordered a Long Island Ice Tea. Little did I know that this one was going to be one nasty drink. As I understand from Abhilash, it was a mix of Gin, Vodka and White Rum. One nasty combination. I was half way through the drink when I asked Amol about the complexities that were involved in getting into the Product Usability and Design Group.
I consider that every individual involved in a project/class bring a unique set of ideas to the table. Some give more and are able to imagine a situation fast. I consider myself to be artistically efficient. I like to work on Photoshop and Gimp is my favorite. The Workstreamr Client which is in Adobe AIR uses Html, CSS and javascript, was done with some sense of what a typical client would look like. The available clients were also taken into consideration along with great IM clients such as Gtalk and Open Source Gaim ( I am not that into Yahoo! coz it cramps my system sometimes). And I think I did a pretty good job at it.
The point here that I express is how much effectiveness can I as an individual can provide if I were to be in a position designing the usability. programming concepts come into picture here and as per Amol, Web 2.0 applications design often requires this kind of a background. If you are able to visualize a product taking into consideration all its complexities, both technical and usability, then you could shine anywhere. That is what I try to communicate. To think like a normal user, a majorly dumb one, is a main ingredient. That lets you conceptualize more I believe. It is sure that I would not let go of programming. Ten years down the lane I still see myself as coding. But I also would like to explore the designing area, just to get a feel of it. Not taking in too much responsibilities but expressing my ideas so that the end product would gain.
To have an idea is normal but to struggle for the idea makes the thought worth while.
I consider that every individual involved in a project/class bring a unique set of ideas to the table. Some give more and are able to imagine a situation fast. I consider myself to be artistically efficient. I like to work on Photoshop and Gimp is my favorite. The Workstreamr Client which is in Adobe AIR uses Html, CSS and javascript, was done with some sense of what a typical client would look like. The available clients were also taken into consideration along with great IM clients such as Gtalk and Open Source Gaim ( I am not that into Yahoo! coz it cramps my system sometimes). And I think I did a pretty good job at it.
The point here that I express is how much effectiveness can I as an individual can provide if I were to be in a position designing the usability. programming concepts come into picture here and as per Amol, Web 2.0 applications design often requires this kind of a background. If you are able to visualize a product taking into consideration all its complexities, both technical and usability, then you could shine anywhere. That is what I try to communicate. To think like a normal user, a majorly dumb one, is a main ingredient. That lets you conceptualize more I believe. It is sure that I would not let go of programming. Ten years down the lane I still see myself as coding. But I also would like to explore the designing area, just to get a feel of it. Not taking in too much responsibilities but expressing my ideas so that the end product would gain.
To have an idea is normal but to struggle for the idea makes the thought worth while.
Monday, April 7, 2008
The XCode IDE
The first demo of the Workstreamr app was given on Friday and Monday. Just before the Friday demo, Manish had a small announcement to make. To try to build a client, as the client we currently are building, that would run on an Apple iPhone. The reward would be an iPhone itself (so ha says) ! I, along with others were definitely interested. The browsed through the latest SDK that Apple had released for the iPhone and came to understand that the SDK needed a Mac for the development. That clearly justified my buying a Mac !!
I downloaded the SDK. A 1.3 Gb dmg file ! When installed, I found my XCode IDE overwritten with the new XCode version IDE which supported the iPhone development. I even downloaded podcasts with the Apple Evangelists giving excellent tips and tricks on iPhone based development. As I have only done development for the desktop, it was necessary to understand that it was not the same thing. Development in a phone which has memory and power constraints in tricky. The consistency and accuracy to be followed is extremely important.
I also came to know that the development language for independent apps in the iPhone was Objective C, a ANSI C based superset. The constructs are different and sometimes confusing. I like the part where messages are passed for method calls, it reminded me of Ruby. I am still trying to get in grips with this language for further development.
I was mesmerized by the development platform that Apple provided. XCode for app development, DashCode for web based development, Instruments for performance analysis. The iPhone development does not has the Interface Builder support yet but once it comes there no beating the toolkit.
Looking forward to some excellent programming on Objective C now !!!
I downloaded the SDK. A 1.3 Gb dmg file ! When installed, I found my XCode IDE overwritten with the new XCode version IDE which supported the iPhone development. I even downloaded podcasts with the Apple Evangelists giving excellent tips and tricks on iPhone based development. As I have only done development for the desktop, it was necessary to understand that it was not the same thing. Development in a phone which has memory and power constraints in tricky. The consistency and accuracy to be followed is extremely important.
I also came to know that the development language for independent apps in the iPhone was Objective C, a ANSI C based superset. The constructs are different and sometimes confusing. I like the part where messages are passed for method calls, it reminded me of Ruby. I am still trying to get in grips with this language for further development.
I was mesmerized by the development platform that Apple provided. XCode for app development, DashCode for web based development, Instruments for performance analysis. The iPhone development does not has the Interface Builder support yet but once it comes there no beating the toolkit.
Looking forward to some excellent programming on Objective C now !!!
Thursday, March 27, 2008
AIR for the mind
These days its a steep learning curve of me. I have been fiddling around with Adobe AIR for some time now and I'll say every second of it has been great. Manish has been insisting that I document the things I have done. But I find it better to do than to document. Of course in that case what you know is bottled and not useful to others. I'll try to jot down the stuff (though very little) that I understand after 3 weeks of AIR.
The reason why I looked at Adobe AIR was for Workstreamr. The first thing that I found was documentation provided by Adobe. These livedocs were extremely helpful. I installed the runtime environment from Adobe and then the sdk. Before looking at the sdk I saw an Eclipse based IDE called Flex Builder provided by Adobe. I downloaded this and started my work on this.
There are 3 ways you could make an Adobe AIR app. Using HTML/Javascript, Flex or Flash. I was always interested in Actionscript and thats why I tried out Flex Developer. Here it is required that you write xml file which will be converted into Actionscripts (swf files at last) and will be run by AIR. The xml file creation for this was greatly simplified by Flex builder but I had to learn some Actionscript within a short frame of time. I fiddled wit hthis for some time after which I decided to go and check out the HTML/Javascript based approach. Aptana was used here as it had a great support for building AIR apps.
It took me less time to get used to all the nifty stuff that AIR had provided to make the HTML based approach work. The base is just an Html file which includes a main Javascript file called AIRAliases. It contains all the aliases that you need to access the Runtime Environment. The AIRIntrospector Javascript file is another thing that is required for debugging purposes. When the app is running press F11 and you will see the Introspector pop up.
Now comes the UI based stuff. I loved what Snitter, Twhirl, Spaz and Pownce had done with their AIR applications. The shadows and stuff. In Flex this was easy. Just create a shadow object and give that to the main window. For the Html part this was done making use of a semi transparent image ( dot fading out ) being repeated through out a div with a large border. I had done most of my work using the prototype and scriptaculous libraries, so I chose them as the main Javascript libraries for the AIR app too. The other options include EXT, Jquery, Spry, MochiKit etc.
The documentation for the various methods that AIR has was taken as a reference. Some of the stuff like Effect queuing did not work for me using Scriptaculous. I am also told that JQuery is the most used library for the HTML based development. I'll probably shift to JQuery once I get a feel of it. [:)] .
The notifications is another thing that I was trying to do. Those small notifications that come up on the right bottom of your screen when ever someone messages you. It took me sometime to find out that this 'purr' was indeed an Actionscript that is included with the main Html file in snitter as well as Spaz. I decompiled this swf file ( sorry but I had to) and looked inside the code, managed to find the notifier, the notifier queue and the actual 'purr'. The color theme must be changed, so Ill have to hack the whole code (I think).
The Javascript that is made has been done with Object Orientation in mind. The Html / Javascript and CSS are decoupled. Another aspect I like about doing this in Html is that a single change of CSS changed the UI completely. Talk of decoupled UI and Functionality.
Still working on this and hope it will end good. I would like to thank all these apps made in Adobe AIR which I took as reference (both the Html ones and the Swf ones I managed to hack).
The reason why I looked at Adobe AIR was for Workstreamr. The first thing that I found was documentation provided by Adobe. These livedocs were extremely helpful. I installed the runtime environment from Adobe and then the sdk. Before looking at the sdk I saw an Eclipse based IDE called Flex Builder provided by Adobe. I downloaded this and started my work on this.
There are 3 ways you could make an Adobe AIR app. Using HTML/Javascript, Flex or Flash. I was always interested in Actionscript and thats why I tried out Flex Developer. Here it is required that you write xml file which will be converted into Actionscripts (swf files at last) and will be run by AIR. The xml file creation for this was greatly simplified by Flex builder but I had to learn some Actionscript within a short frame of time. I fiddled wit hthis for some time after which I decided to go and check out the HTML/Javascript based approach. Aptana was used here as it had a great support for building AIR apps.
It took me less time to get used to all the nifty stuff that AIR had provided to make the HTML based approach work. The base is just an Html file which includes a main Javascript file called AIRAliases. It contains all the aliases that you need to access the Runtime Environment. The AIRIntrospector Javascript file is another thing that is required for debugging purposes. When the app is running press F11 and you will see the Introspector pop up.
Now comes the UI based stuff. I loved what Snitter, Twhirl, Spaz and Pownce had done with their AIR applications. The shadows and stuff. In Flex this was easy. Just create a shadow object and give that to the main window. For the Html part this was done making use of a semi transparent image ( dot fading out ) being repeated through out a div with a large border. I had done most of my work using the prototype and scriptaculous libraries, so I chose them as the main Javascript libraries for the AIR app too. The other options include EXT, Jquery, Spry, MochiKit etc.
The documentation for the various methods that AIR has was taken as a reference. Some of the stuff like Effect queuing did not work for me using Scriptaculous. I am also told that JQuery is the most used library for the HTML based development. I'll probably shift to JQuery once I get a feel of it. [:)] .
The notifications is another thing that I was trying to do. Those small notifications that come up on the right bottom of your screen when ever someone messages you. It took me sometime to find out that this 'purr' was indeed an Actionscript that is included with the main Html file in snitter as well as Spaz. I decompiled this swf file ( sorry but I had to) and looked inside the code, managed to find the notifier, the notifier queue and the actual 'purr'. The color theme must be changed, so Ill have to hack the whole code (I think).
The Javascript that is made has been done with Object Orientation in mind. The Html / Javascript and CSS are decoupled. Another aspect I like about doing this in Html is that a single change of CSS changed the UI completely. Talk of decoupled UI and Functionality.
Still working on this and hope it will end good. I would like to thank all these apps made in Adobe AIR which I took as reference (both the Html ones and the Swf ones I managed to hack).
Tuesday, March 25, 2008
Workstreamflow
This one is all about the perspective changing project that I am currently a part of. Workstreamr .The work done in this application has been tremendous. Though I am not in the development team for this project, I have done tit bits for it and I feel I have accomplished more than I ever thought of accomplishing.
The project is an entire shift of the thought process that a normal person undergoes. The original idea conceivers, Stowe, Ben and Sam, had a great thought in mind. To give the users the power to manage , maintain and view data. A truly Open Source oriented concept with Web 2.0 backup. The data has been categorized into groups so that the users could distinguish and relate. The data flows as streams of information and the user has the power to choose to view, respond or ignore.
The feature that I find very intriguing is 'the handing over the power to the user'. Many applications that is web oriented don' do that. They have a fixed way of doing things and the users are happy with it. This lets the users be dumb (like those early days of internet). A wiki based structure with collaboration and information passing is the core 'funda' of this application.
Time based. This is a great shift in perception. The information you see is time based. It shows up taking into consideration the time factor.. It does not have a state maintained. 'Backtracking becomes tricky here and tedious' is a statement that would come into ones mind after this. Versioning is a great system that is used by many Web2.0 based systems to handle this. The change triggers a version which could be backtracked and changes reviewed. The Configuration Management Systems work in this fashion and they work perfectly fine.
Extensibility is another thing I like. How could you be happy with a product which you can't play around with ? (emm ... Windows ? ) . And all platforms are not like the OS-X anyway ! This application lets you fool around with it. I guess the users will love that.
Grouping of data has been a core factor of all databases. Think of a world where you cant correlate or group data. You can't bundle stuff together. That makes a very unrelated series of events which is useless and odd. This grouping is another characteristic that makes this application stand apart from any other one.
Filters. Again a database oriented concept but a general computer science one. Why would I see unwanted information again ? I would rather see filtered information than see all information, even irrelevant ones. If I have a filter already , it is very likely that I will use it again. So I'll store the filter and share them (Web 2.0 comes in again) so that other people with similar tastes could use it.
User management is a main ingredient in any project management system. Assigning, Owning, Tracking Progress are all factors that a Manager would like to do in his Project Management Tool. Versioning also comes into picture here as the application is intended to be stateless.
The Open API is the last thing I would like to write about. In the modern world, a high end graphically excellent functionally proficient web application is doomed if it does not expose a public api for the users to fiddle with. This a part of passing the power on to the user. Workstreamr has this factor in mind and exposes an API which is simple to use. A client will also be created in Adobe AIR ( and that where I come in ) which will let the users request and respond to their data which comes as streams of information.
The first cut will be out in some time but until then it all wait and watch.
The project is an entire shift of the thought process that a normal person undergoes. The original idea conceivers, Stowe, Ben and Sam, had a great thought in mind. To give the users the power to manage , maintain and view data. A truly Open Source oriented concept with Web 2.0 backup. The data has been categorized into groups so that the users could distinguish and relate. The data flows as streams of information and the user has the power to choose to view, respond or ignore.
The feature that I find very intriguing is 'the handing over the power to the user'. Many applications that is web oriented don' do that. They have a fixed way of doing things and the users are happy with it. This lets the users be dumb (like those early days of internet). A wiki based structure with collaboration and information passing is the core 'funda' of this application.
Time based. This is a great shift in perception. The information you see is time based. It shows up taking into consideration the time factor.. It does not have a state maintained. 'Backtracking becomes tricky here and tedious' is a statement that would come into ones mind after this. Versioning is a great system that is used by many Web2.0 based systems to handle this. The change triggers a version which could be backtracked and changes reviewed. The Configuration Management Systems work in this fashion and they work perfectly fine.
Extensibility is another thing I like. How could you be happy with a product which you can't play around with ? (emm ... Windows ? ) . And all platforms are not like the OS-X anyway ! This application lets you fool around with it. I guess the users will love that.
Grouping of data has been a core factor of all databases. Think of a world where you cant correlate or group data. You can't bundle stuff together. That makes a very unrelated series of events which is useless and odd. This grouping is another characteristic that makes this application stand apart from any other one.
Filters. Again a database oriented concept but a general computer science one. Why would I see unwanted information again ? I would rather see filtered information than see all information, even irrelevant ones. If I have a filter already , it is very likely that I will use it again. So I'll store the filter and share them (Web 2.0 comes in again) so that other people with similar tastes could use it.
User management is a main ingredient in any project management system. Assigning, Owning, Tracking Progress are all factors that a Manager would like to do in his Project Management Tool. Versioning also comes into picture here as the application is intended to be stateless.
The Open API is the last thing I would like to write about. In the modern world, a high end graphically excellent functionally proficient web application is doomed if it does not expose a public api for the users to fiddle with. This a part of passing the power on to the user. Workstreamr has this factor in mind and exposes an API which is simple to use. A client will also be created in Adobe AIR ( and that where I come in ) which will let the users request and respond to their data which comes as streams of information.
The first cut will be out in some time but until then it all wait and watch.
Friday, March 14, 2008
Hectic Schedule
The last 2 days just took the juice from me. After the Workstreamr 0.1 iteration, the focus was towards getting the initial page in html just right. I am a great believer in doing things accurately the first time around so that even if there are changes we would have to do a lot of them. The usage of only divs as the components were one of them. And Joydeep found it very hard to design the html in that way. We fixed a lot of issues, including the floating divs, the problems with the 'IE' engine. And the result looks great. It has all the ingredients which makes a great web application.
The developers in Workstreamr have also done a great job. To look at a working product, even though it has not finished, is a great sight. The processes followed, which by the way I never followed before, is great. Its a little tedious, but worth the time. I still have to get used to logging my work !! Javascript is the core area in this project and I feel the Object Oriented aspects of Javascript should be implemented more consistently.
But the new role, even if the 'official role' does not change works great for me. I like to visualize stuff and thats what I am doing here. Suggesting ideas, listening to new stuff and trying to implement them. For me it doesn't matter if I log work because I develop anyway and the people I talk to know what I am about.
We had a pizza party today and reflected on the great things that happened. Appreciated all the team members, from HR to me. I consider that this is a very important thing to do. This boosts the morale of the team members. More over it generates the feeling of oneness.
The next week would also be pretty hectic as the html has to go in for integration along with other stuff. The rest of the html must be implemented. Javascript must be written. I dont know how Abhijat, Abhilash and Rohan do it !! Kudos to them.
The developers in Workstreamr have also done a great job. To look at a working product, even though it has not finished, is a great sight. The processes followed, which by the way I never followed before, is great. Its a little tedious, but worth the time. I still have to get used to logging my work !! Javascript is the core area in this project and I feel the Object Oriented aspects of Javascript should be implemented more consistently.
But the new role, even if the 'official role' does not change works great for me. I like to visualize stuff and thats what I am doing here. Suggesting ideas, listening to new stuff and trying to implement them. For me it doesn't matter if I log work because I develop anyway and the people I talk to know what I am about.
We had a pizza party today and reflected on the great things that happened. Appreciated all the team members, from HR to me. I consider that this is a very important thing to do. This boosts the morale of the team members. More over it generates the feeling of oneness.
The next week would also be pretty hectic as the html has to go in for integration along with other stuff. The rest of the html must be implemented. Javascript must be written. I dont know how Abhijat, Abhilash and Rohan do it !! Kudos to them.
Friday, February 22, 2008
MVC for HTML ?
Today I Stumbled Upon a great piece of lecture given by Jason Seifer from the Rails Envy group about Unobtrusive Javascript. The piece of video was a great insight on how to write apps which are purely MVC. Now the question is how does this have MVC ?
The terminologies according to Wikipedia
The comparison with Model/View/Controller is kind of wayward here. I would have it called Media/View/Controller for the better. The Media being the Cascading Style Sheets which hold the Presentation, the View being the HTML which acts as the Content and the Controller being the Javascripts which acts as the Behavior.
People have widely adopted the CSS style of coding ie. having the presentation separated and put into files that could be included in the HTML file. This accounts for better structure and traceability. If I were to change the font, I know the centralized and only place to change it. I won't want to change all the 'style' attributes of the tags in my HTML files. Of course the developer would have to understand how bad IE sucks when he tries to implement all those CSS hacks (necessary hacks) to make the page look the same in IE. But after the ACID test results (which Firefox WILL pass !!), I suppose developers will have a better time in the future.
Now I have not seen the same effort go into creating the Javascript files. Developers still write native Javascript using the attributes (events) and they end up in replicating code and making the HTML page obtrusive and ugly. Having all the code base in simple 'js' files allows the programmer re usability of code which results in what Jason states as 'Unobtrusive Javascript'. I personally have been using the excellent Prototype Javascript library for all my projects (including Workstreamr) and the results have been great.
A typical situation when the Javascript becomes obtrusive is when you add javascripts to events like click. Say we are content with the code being 'obtrusive'. With Firefox (the best browser in the world) it works fine. No memory leaks, nothing. But with IE this has the famous memory leak problem. If we were to have a site which has say one page and all the content being loaded in an Ajaxy way, then we will have problems with this. This code wont Garbage Collect unless you navigate away from the page (or refresh). Why use this primitive technique when prototype provides elegant event handling functionalities ?
What I would rather do is attach an id with the element ( say a span/div) and then use the event attaching functionality provided by Prototype. This may be implemented in a main js file accordingly (as per your requirements) and the call may happen from inside the page called (say an AJAX call ?). Using the OOP structure of Javascript is also a great add on. As a developer I felt so happy when I tried to use those concepts in my Javacript files. So the main Javascript file may have a Class which defines your application and routines inside the Object created will have the methods used in the application ( like a status update on the side of the app ?).
References :
Rails Envy
MVC
Ruby On Rails
This is the movie. I hope Jason won't mind this knowledge sharing !!
The terminologies according to Wikipedia
- Modal - The domain-specific representation of the information on which the application operates
- View - Renders the model into a form suitable for interaction, typically a user interface element.
- Controller - Processes and responds to events, typically user actions, and may invoke changes on the model.
- Content
- Presentation
- Behavior
The comparison with Model/View/Controller is kind of wayward here. I would have it called Media/View/Controller for the better. The Media being the Cascading Style Sheets which hold the Presentation, the View being the HTML which acts as the Content and the Controller being the Javascripts which acts as the Behavior.
People have widely adopted the CSS style of coding ie. having the presentation separated and put into files that could be included in the HTML file. This accounts for better structure and traceability. If I were to change the font, I know the centralized and only place to change it. I won't want to change all the 'style' attributes of the tags in my HTML files. Of course the developer would have to understand how bad IE sucks when he tries to implement all those CSS hacks (necessary hacks) to make the page look the same in IE. But after the ACID test results (which Firefox WILL pass !!), I suppose developers will have a better time in the future.
Now I have not seen the same effort go into creating the Javascript files. Developers still write native Javascript using the attributes (events) and they end up in replicating code and making the HTML page obtrusive and ugly. Having all the code base in simple 'js' files allows the programmer re usability of code which results in what Jason states as 'Unobtrusive Javascript'. I personally have been using the excellent Prototype Javascript library for all my projects (including Workstreamr) and the results have been great.
A typical situation when the Javascript becomes obtrusive is when you add javascripts to events like click. Say we are content with the code being 'obtrusive'. With Firefox (the best browser in the world) it works fine. No memory leaks, nothing. But with IE this has the famous memory leak problem. If we were to have a site which has say one page and all the content being loaded in an Ajaxy way, then we will have problems with this. This code wont Garbage Collect unless you navigate away from the page (or refresh). Why use this primitive technique when prototype provides elegant event handling functionalities ?
What I would rather do is attach an id with the element ( say a span/div) and then use the event attaching functionality provided by Prototype. This may be implemented in a main js file accordingly (as per your requirements) and the call may happen from inside the page called (say an AJAX call ?). Using the OOP structure of Javascript is also a great add on. As a developer I felt so happy when I tried to use those concepts in my Javacript files. So the main Javascript file may have a Class which defines your application and routines inside the Object created will have the methods used in the application ( like a status update on the side of the app ?).
References :
Rails Envy
MVC
Ruby On Rails
This is the movie. I hope Jason won't mind this knowledge sharing !!
Thursday, February 14, 2008
A Busy Week
The past week (or rather 2 weeks ) was tedious. Work was at its best not letting any time for the poor worker. Stowe Boyd was here in Delhi, were he talked about his visions and ideas for his new baby 'Workstreamr'. To say the least I was taken aback by his eloquence. He was stern with what he wanted but was open to new ideas as well. His short (or rather long) speeches he gave were absolutely great. Of all the people I have heard speaking, he attracts and keeps his listeners interested.
He talked about the concepts that he wanted, his visions on how the product would look like and the concerns he had. He was one of those people who would sell a dime for a dollar. Persuasive is the word if the above analogy was crap. We had a great time with Ben and Sam when we zig zag -ed through those Noida Highways, without even caring the signal lights. Ben and Sam better get used to those as they are going to be here for some time now!
My role has slightly shifted from a ROR programmer to an HTML programmer (if that could be categorized as programming). Standardizing the actual interface. I have always liked JavaScript but I feel I would have more time off that those other guys now. The problem that I faced, and all those HTML guys would agree to this, is not to make HTML with great style sheets but to make them work with the ever crappy Internet Explorer. I can't figure out why IE has become the most used browser. Its as Dracula says 'You suck more than I do !!'.
He talked about the concepts that he wanted, his visions on how the product would look like and the concerns he had. He was one of those people who would sell a dime for a dollar. Persuasive is the word if the above analogy was crap. We had a great time with Ben and Sam when we zig zag -ed through those Noida Highways, without even caring the signal lights. Ben and Sam better get used to those as they are going to be here for some time now!
My role has slightly shifted from a ROR programmer to an HTML programmer (if that could be categorized as programming). Standardizing the actual interface. I have always liked JavaScript but I feel I would have more time off that those other guys now. The problem that I faced, and all those HTML guys would agree to this, is not to make HTML with great style sheets but to make them work with the ever crappy Internet Explorer. I can't figure out why IE has become the most used browser. Its as Dracula says 'You suck more than I do !!'.
Subscribe to:
Posts (Atom)