Monday, March 10th, 2008
Category: JavaScript
, Toolkit
Appcelerator is a fairly new open source toolkit on the block that is trying to be an Open Web RIA to compete with Flex and co. with high profile folks such as Marc Fleury as advisors.
Nolan Wright, CTO, has written a piece for syscon entitled The Next Web Development Episode Is RIA + SOA. In the article Nolan talks about Appcelerator and how it fits into his world view:
1. Design the "look" of the application
This is the general appearance of an application. It includes things like: color, fonts, graphics, and a general page layout. Common toolsets: HTML, CSS and images
2. Integrate Widgets
Widgets encapsulate a set of common capabilities within a single component. They typically contain both “look and feel” as well as a set of pre-defined dynamic behaviors. They are a fundamental building block of an RIA.
Common toolsets: ExtJS, Dojo, Yahoo YUI and several other small widget projects
3. Add dynamic behavior to the user interface
Creating dynamic behavior in the user interface involves two things:
- Event handling
- Document Object Model (DOM) Manipulation
Event handling is the ability to know when a particular event occurs (e.g., a user clicks a button or a service response is received). DOM Manipulation allows you to dynamically change the user interface based on the receipt of an event. Common toolsets: Javascript libraries like JQuery, Prototype, and Scriptaculous
4. Consume services
Consuming backend services is a key capability of an RIA. It enables the creation of single page user interfaces that exchange application data with services. It also enables a clean separation between the user interface and the service tier. The most common method for interacting with services is Ajax. Common toolsets: Javascript libraries like JQuery and Prototype
5. Create services
Services provide an interface to data and application business logic. Common toolsets: There are several frameworks available for creating services in your programming language of choice.
To illustrate the DSL that Appcelerator uses, Nolan has some comparisons between jQuery code such as:
JAVASCRIPT:
-
-
$(function(){
-
$("select#comboOne").change(function(){
-
$.getJSON("/combo.php", {id: $(this).val(), ajax: 'true'}, function(j){
-
var options = '';
-
for (var i = 0; i <j.length; i++) {
-
options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '';
-
}
-
$("select#comboTwo").html(options);
-
})
-
})
-
})
-
And the meta language:
HTML:
-
-
-
on=”change then r:load.combo2.request”>
-
</select>
-
-
on=”r:load.combo2.response then value[property=rows,text=text,value=value]”>
-
</select>
-
We have been talking about the world of SOA coming to fruition for quite some time. TIBCO GI was talking about this several years ago. Is 2008 going to be the year?
Wednesday, March 5th, 2008
Category: Toolkit, Yahoo!, Conferences, Announcements
Yahoo's Tom Coates today finally released FireEagle at ETech 2008. Seeing Tom in the office for quite a while getting everything ready makes me very happy to announce that it is out and invite you to come along and sign up for the beta to start testing and - even more importantly - developing applications for it. This is FireEagle:
Fire Eagle is an open location services platform offering web, mobile, and desktop developers a simple way to build new location-based applications while also ensuring that consumers have complete control over their data, including how, when and where their location is made available. Want to easily make your site responsive to a user's location? Or, maybe you've found a way to capture someone's location and you want to find cool apps to plug it into? By doing the heavy lifting and connecting you to a community of geo-developers, Fire Eagle makes it easier to build location-aware services.
Once you got in you'll be able to download development kits in several languages including PHP, Python, Ruby and of course JavaScript. All the API calls are REST and the API authentication is handled via OAuth. The output format is either XML or JSON. The code is licensed with BSD and you can even contribute to the FireEagle source at a code repository.
The available API calls are:
- user
- Returns the location of a specific user in a location hierarchy format.
- recent
- Returns a list of users of the application who have updated their location within the given amount of time.
- within
- Takes a Place ID or a WoE ID and returns a list of users using your application who are within the bounding box of that location.
- update
- Sets a user's current location using using a Place ID hash or a set of location parameters. If the user provides a location unconfirmed with lookup method then Fire Eagle makes a best guess as to the user's location and updates.
- lookup
- Disambiguates potential values for update. Results from lookup can be passed to update to ensure that Fire Eagle will understand how to parse the location parameter.
You can learn more by watching the video of Tom explaining FireEagle at ETech.
The uses for a service like this are endless. From sensible search applications that show you places of interest nearby your current location up to real-life games of high-tech hide and seek everything is possible.
Friday, February 29th, 2008
Category: Toolkit, Announcements
The Pownce team has been working hard to get their API up to speed and have gotten the API to a point where some cool applications can be built from it. Yesterday, they announced v2.0 of the Pownce API:
We’re sorry it took so long for us to release a complete API. We’ve taken great care to provide the best experience for developers and we hope the wait was worth it. Going forward, we’ll be working hard to keep Pownce the best social messaging application out there.
Well worth the wait, new features include:
- Ability to post notes
- Ability to post messages, links, files, events and replies
- Ability to fetch lists of private and friends-only notes.
- Integration of OAuth token-based web authentication.
This should open the doors for building new custom Pownce clients and applications similar to what's been done with Twitter.
In addition, the Pownce team has created a new application directory to showcase applications built by developers.
Documentation for Pownce API v2.0 can be found here: http://pownce.pbwiki.com/API+Documentation2-0
Thursday, February 28th, 2008
Category: Toolkit, Dojo, Utility
WaveMaker has just released a new version of its open source Visual Ajax Studio v3.1.1. It is similar to TIBCO GI, but built on top of Dojo with JavaScript output that is very terse and even looks like something you may have written (which is rare indeed for a tool).
Studio lets users create database- and web service-driven Ajax web applications using a wysiwyg visual designer. WaveMaker helps users create simple applications without any scripting knowledge, while developers can easily add Javascript, HTML, CSS, and Java code to create complex application behavior.
Studio is a web-based application that leverages the Dojo Toolkit to create pages containing widgets and Dojo Dijits. Users drag and drop to create complex page layouts containing the Dojo grid, Dijit based forms, Google Gadgets, and a variety of other included widgets. Developers can even author their own widgets and include them directly in the designer.
A Java-based backend provides access to database, web, and user created services. Applications are deployed in a standard WAR container for use on a variety of Java application servers. For ease of use, Tomcat is included with the installer. It's also possible for Ajax developers to use their own backend with Studio generated web pages.
Wavemaker Visual Ajax Studio is available under the open source AGPL version 3 license as well as a commercial license. Download Wavemaker Visual Ajax Studio at wavemaker.com.
Wednesday, January 9th, 2008
Category: Java, Toolkit
WebCream has been renamed and a new version launched as AjaxSwing 2.0, a framework that "does all server communication via asynchronous JavaScript and uses partial page updates to reflect changes in the browser."
New Features
- AJAX functionality for component rendering and asynchronous communication with the server
- Asynchronous submit of client-side events and operations
- Partial page updates only to changed components
- Dramatic speed improvements in rendering and request processing
- Row context menus in JTable (see TableSupport)
- Custom node icons and context menus in JTree (see TreeSupport)
- Improved scripts on UNIX platforms
- Allow environment variables and directories of JARS in agent.classPath
- Drop shadows are added to windows
Fancy writing your apps in Swing? If so, check out the demos, and download away.
Tuesday, October 16th, 2007
Category: Toolkit
Mashable.com is best known for their up-to-minute reporting on trendy websites and social networking news. Along with their standard news, they regularly make posts that list out great resources for different web technologies. Well, it looks like Mashable's Sean P. Aune spent the whole weekend on a new post because he's listed out 250+ tools and resources for coding the web.
While many of the sites will certainly be familiar to Ajaxian readers, there's sure to be plenty of new reading material and tools for all to enjoy. I personally had never heard of Load Info - Gif Generator, a site providing Ajax indicators, and I'm sure I'll find even more great sites as I scan all 250 listings.
Included are links for Ajax, CSS, ActionScript and JavaScript tools as well as sites catering to server-side technologies.
Monday, October 15th, 2007
Category: JavaScript, Java, Toolkit
Ben and I have been surprised at how the universe of Ajax continues to expand. This redshift which has taken it past the browser onto the phone, the Wii, and the server is amazing.
Another technology that has done a similar thing is OSGi in the Java space. It started as a component model for devices, but has since grown to the desktop with Eclipse, and now the server.
To ties these together, the Eclipse Foundation has announced Eclipse Rich Ajax Platform (RAP) 1.0:
RAP 1.0 is the first Ajax platform that allows developers to create Rich Internet Applications (RIA) using the Eclipse component model, based on the OSGi standard. OSGi is a service-oriented, component-based environment that promotes the interoperability of applications and services. Organizations using RAP are now able to create Ajax and RIA applications that are component-based and integrate into existing enterprise systems.
RAP 1.0 includes features well-suited for enterprises that are building a large number of new applications based on Ajax and RIA technologies. These features include:
- The ability to create and deploy RIA or RCP applications from the same Java code base, allowing organizations the flexibility to create browser-based RIA application or desktop-based rich client applications.
- Support for creating Ajax applications based on the OSGi component model.
- Java development tools that tightly integrate with the Eclipse platform and allow developers to quickly develop, test, debug and deploy RIA applications.
- A complete set of frameworks for creating Ajax applications that support scalable user interfaces, complex widgets, databinding and loose coupling for UI elements.
Jochen Krause sat down with me to chat a little about what RAP is about. He talked about how the target audience for RAP is Java developers in the enterprise setting. If you know RCP/SWT and you want to develop rich browser applications, you are set. Jochen says that his company has seen that they can share the same base of code (~80%) for products that deploy to the web and the desktop. You get the benefit of using the same workbench and extension points that you know and love from RCP.
RAP is very different to something like GWT. RAP runs the logic on the server, and emits JavaScript for the controls at runtime (as opposed to compile-time). An implementation of SWT runs on the server and people can extend your views and perspectives to add functionality.
Jochen also thought that JSF wasn't as well suited to Ajax development due to its history as a document-centric technology. Many in the community would disagree with that (just ask the Seam folk!).
When developing your RAP applications, forget about the web a little. You can't style things with CSS as their needs to be a stricter mapping between the Java and JavaScript components. They do have a properties system that is similar to CSS in some ways.
Tooling is a definite benefit. You get all of the Eclipse tooling joy, and there is future work being done by many companies such as NEC to give you a rich DB -> client UI experience. This isn't done just for RAP, but for Eclipse in general, and RAP gets to piggy back on the work.
All in all it is interesting to see what happens with the marriage of OSGi and Ajax!
Monday, October 8th, 2007
Category: JavaScript, Library, Toolkit, UI, Tutorial
Sun Labs has released a new Lively Kernel project that takes the Morphic UI framework that Sun developed for Self, and implements it in JavaScript.
This enables you to run the kernel and start interacting with the world. There is one world.
Why did they do it?
The Lively Kernel places a special emphasis on treating web applications as real applications, as opposed to the document-oriented nature of most web applications today. In general, we want to put programming into web development, as opposed to the current weaving of HTML, XML and CSS documents that is also sometimes referred to as programming.
A key difference between the Lively Kernel and other systems in the same area is our focus on uniformity. Our goal is to build a platform using a minimum number of underlying technologies. This is in contrast with many current web technologies that utilize a diverse array of technologies such as HTML, CSS, DOM, JavaScript, PHP, XML, and so on. In the Lively Kernel we attempt to do as much as possible using a single technology: JavaScript. We have chosen JavaScript primarily because of its ubiquitous availability in the web browsers today and because of its syntactic similarity to other highly popular languages such as C, C++ and Java. However, we also want to leverage the dynamic aspects of JavaScript, especially the ability to modify applications at runtime. Such capabilities are an essential ingredient in building a malleable web programming environment that allows applications to be developed interactively and collaboratively.
Boot up Safari 3, and check out the interactive tutorial, and read the FAQ.
Wednesday, October 3rd, 2007
Category: JavaScript, Toolkit, Utility
Awhile back we discussed Dreamweaver as a potential Ajax IDE.
Here's the press release:
Nitobi"s Complete UI is a powerful set of components that will give Dreamweaver users the ability to present data in an engaging format in a fraction of the time," states Michael Lekse, Vice President of Sales and Services at WebAssist. "Dreamweaver professionals looking to enhance their user interface functionality should turn to Nitobi with confidence."
The easy drag and drop feature for Dreamweaver reflects Nitobi"s philosophy of fast, easy web application development--a key selling point of Complete UI. Complete UI components are designed to be easy to implement and to help create web applications with intuitive and graceful user interfaces. The Complete UI suite includes:
- Grid -- A cross-browser spreadsheet with Excel "copy/paste", LiveScrolling, and more.
- ComboBox -- A drop-down menu with autocomplete functionality, similar to Google Suggest.
- Calendar -- A high-performance calendar picker that can be used with Nitobi Grid or in standalone web applications.
- Callout -- A rich, skinnable tool-tip that prompts users with real-time feedback and helpful instructions as they navigate through an application.
- Fisheye -- A tool bar menu featuring fisheye magnification, similar to Apple OS X tool bar.
- Spotlight -- A tool for creating stylish guided tours of websites and applications.
- Tabstrip -- Folder tabs for navigating to different sections of a web application via Ajax or iFrame requests.
- Tree -- A hierarchical data view, similar to the folder view in Windows Explorer.
- Ajax Toolkit -- A library of fully-documented tools used in Nitobi components that can be re-used in your own applications, or to build your own components.
In addition to Dreamweaver support, Complete UI includes enhancements to Nitobi Grid, including expanding spreadsheet-style rows and even better performance.
What better way to check this out than a set of screencasts?
What do you think of Dreamweaver now?
Monday, September 24th, 2007
Category: Ajax, Editorial, Toolkit
Aaron Newton and Jep Castelein wrote in pointers to a recent Joel "on software" Spolsky's essay, which this time around has an Ajax focus.
His whole essay revolves around this observation:
So, we don’t care about performance or optimization much anymore. Except in one place: JavaScript running on browsers in AJAX applications. And since that’s the direction almost all software development is moving, that’s a big deal.
Using the history of DOS and Windows applications as his guide, he makes three conclusions based on this point:
- First, the observation that a slow application today may not be slow tomorrow:
[Historically, the] developers who ignored performance and blasted ahead adding cool features to their applications will, in the long run, have better applications.
- Second, we're likely to see some sort of uber-Ajax toolkit emerge. It will be slow, but see the previous point:
If history repeats itself, we can expect some standardization of Ajax user interfaces to happen in the same way we got Microsoft Windows. Somebody is going to write a compelling SDK that you can use to make powerful Ajax applications with common user interface elements that work together. And whichever SDK wins the most developer mindshare will have the same kind of competitive stronghold as Microsoft had with their Windows API.
- Third, once this happens, the applications with custom-rolled UI toolkits will be obsolete:
And while you’re not paying attention, everybody starts writing NewSDK apps, and they’re really good, and suddenly businesses ONLY want NewSDK apps, and all those old-school Plain Ajax apps look pathetic and won’t cut and paste and mash and sync and play drums nicely with one another. And Gmail becomes a legacy. The WordPerfect of Email. And you’ll tell your children how excited you were to get 2GB to store email, and they’ll laugh at you. Their nail polish has more than 2GB.
Time will tell if Joel's naive application of history to the present will bear out, but it's hard to dispute that in a year or two, JavaScript will be much, much faster.
I did smirk a bit when reading this bit:
You can follow the p-code/Java model and build a little sandbox on top of the underlying system. But sandboxes are penalty boxes; they’re slow and they suck, which is why Java Applets are dead, dead, dead... Sandboxes didn’t work then and they’re not working now.
Someone tell that to Microsoft and Adobe, quick! ;-)
UPDATE:
A commenter complained about my use of the word "naive" without supporting comments. I don't want to bore the community with my own essay, but in brief:
Every Ajax/Web 2.0 play and its dog are trying to repeat the DOS/Windows history, but it's an entirely different marketplace with perhaps three orders of magnitude more players. Despite a few hundred years of business precedents when Microsoft came around, no one predicted the DOS/Windows monopoly--but plenty of pundits were off predicting other interesting futures based on their analysis of the past.
I think it's a touch naive to assume that:
The NewSDK will be the second coming of Microsoft Windows; this is exactly how Lotus lost control of the spreadsheet market. And it’s going to happen again on the web because all the same dynamics and forces are in place. The only thing we don’t know yet are the particulars, but it’ll happen.
Any web developer knows that an imperfect free market with imperfect bickering standards bodies can perpetuate wildly inefficient and incomplete platforms for an awfully long time--despite a clear motivation from a lot of big companies to create a large, high-level standard set of cross-platform APIs. Throw in the open-source wild card, where large numbers of developers create amazing software for no particularly compelling financial motive, and the traditional predictable dynamics of the marketplace are further disturbed.
If recent history is any guide, it may be that instead of some "NewSDK" taking over, we're more likely to continue to see incremental improvements throughout the web stack and gradual cooperation amongst browser vendors. Cross-browser-OS-compatible-across-every-web-app drag-and-drop and copy-and-paste? Yeah, maybe, but if that's going to happen, it's probably more likely to emerge via HTML5-like efforts than a new high-level GWT-like platform.
Am I wrong in thinking Joel's history lesson a bit naive? Where do you think things are headed?
Wednesday, September 12th, 2007
Category: Toolkit, Programming
ActiveState have announced the launch of The Open Komodo Project which will offer an open source code base from which to develop integrated development environments.
The Open Komodo Project, based on the award-winning Komodo IDE, is a new initiative by ActiveState to create an open source platform for building developer environments. The Open Komodo Project will create Firefox-integrated web developer tools that support the open web.
The Open Komodo Project aims to create a full-featured web development tool for client-side web development integrated with Firefox©, Mozilla's free, open source web browser, and based on the award-winning Komodo IDE. This new tool, codenamed Komodo Snapdragon, will be developed in collaboration with the open source community.
Best known for their ActivePerl, Komodo Edit and Komodo IDE development tools, ActiveState wanted to give back to the open source community which has long supported their products and efforts:
Meanwhile, our friends within the Mozilla Community were looking for tools and applications that advocate the open web. Since Komodo is built on the Mozilla platform and ActiveState has had a long-standing relationship with the open source community, making Komodo a part of the technology stack for the open web was an obvious choice, one that benefits both the open source community and ActiveState.
This announcement even got Dojo's Alex Russell all worked up:
Very few of the Web IDE vendors seem to really “get” the web, and along with the folks at Aptana and Panic, the ActiveState bunch have impressed the hell out of me with their constant support of Open Source, deep understanding of why webdev sucks, and what they can do to fix it.
The first technology preview is expected to be ready by early November along with access to a public source repository and the Open Komodo website.
Full information about the project can be found on their project page
Wednesday, August 1st, 2007
Category: JavaScript, Toolkit, Yahoo!
YUI 2.3 has been released with six new components, as well as a skinning architecture and a new look for the components.
Features
- Rich Text Editor: Cross-browser support has always been a major challenge for RTEs, and we think you’ll be impressed with how well this editor works across the various environments. You can instantiate it with just a few lines of code for simple implementations
- Base CSS: Nate Koechley continues to extend and refine the YUI CSS foundation. Base CSS itself applies consistent and common style treatments for the foundation
- YUILoader: A mechanism for loading YUI components (and/or your own custom components) on the page via client-side script.
- ImageLoader: Allows you to defer the loading of some images to speed initial rendering time on your pages.
- ColorPicker: The Color Picker provides a powerful UI widget for color selection, featuring HSV, RGB, and Hex input/output and a web-safe color-selection swatch.
- YUI Test Utility: YUI Test introduces a flexible unit-testing framework for the YUI ecosystem and serves as the foundation for our own unit-test battery.
- Skins
Friday, March 30th, 2007
Category: Toolkit, Mapping
InfiView is a mapping development tool that empowers engineers to build infinite-sized Web 2.0 mind maps, network topologies, organization charts, LDAP tools and technical diagrams.
InfiView uses Ajax technology and its own unique dynamic memory management to enable developers to systematically create graphical web applications using any amount of data (from very small all the way to infinite). With InfiView-built web-applications, end-users seamlessly interact (pan, zoom, right-click for actions…) with all types of graphical data - such as network topologies, DNA sequences or genealogy charts - oblivious to the vast amounts of data available.
100% built in Bindows (www.bindows.net), InfiView is built on top of the Bindows framework which is back-end/server agnostic, and provides best-in-industry support for section-508 accessibility compliance, internationalization and localization.
Try the demos and watch the screencasts
4.5 rating from 116 votes
Thursday, February 22nd, 2007
Category: JavaScript, Library, Toolkit, UI, Yahoo!
Jeremy Gillick wants to keep the peanut butter separate from his jam, and to aide this has written a couple of YUI extensions to help out:
When you’re animating a rollover or fading some colors do you stop and thing what you’re doing? You’re putting the colors, dimensions and effects into your JavaScript! The presentation layer that you’ve worked so hard to externalize is leaking into your JavaScript code. This is a slippery slope that we have to prevent now. The presentation layer should remain in the CSS, markup in the HTML and logic in the JavaScript. If you want to change the colors or sizes the elements are morphed into, you should be making those changes in CSS.
How it works
- ClassAnim starts by reading the styles from the base element.
- Then it quickly applies the new CSS class to it, reads the new styles and removes the class. This happens quicker than the user can notice.
- Now it compares the styles from both versions, extracts the differences that can be animated, and invokes the animation.
HoverHijax animates colors and does it on mouseover and mouseout. My original prototype would actually honor the :hover pseudo class, but good ‘ol Internet Explorer wasn’t allowing me to get to those styles through JavaScript. The current implementation adds a ‘hover’ class to all links when they are being moused over.
JAVASCRIPT:
-
-
YAHOO.util.Event.onAvailable("TestClassAnim", function() {
-
var anim = new YAHOO.mozmonkey.ClassAnim("TestClassAnim");
-
var start = 0;
-
-
YAHOO.util.Event.addListener("TestClassAnim", "mouseover", function() {
-
anim.addClass("classAnimHover");
-
});
-
YAHOO.util.Event.addListener("TestClassAnim", "mouseout", function(){
-
anim.removeClass("classAnimHover");
-
});
-
YAHOO.util.Event.addListener("TestClassAnim", "click", function(){
-
if(start == 0){
-
start = 1; anim.addClass("classAnim2");
-
} else{
-
start = 0; anim.removeClass("classAnim2");
-
}
-
});
-
});
-
