Thursday, August 23, 2012

Development Tools for Javascript - Reference Guide

Development Tools for Javascript:

NOTE:   This is reference document compiled from the embedded links. All credit is given to the original sources; this document does not contain original writing. I will be making further comments about these tools as I begin to evaluate or use in any upcoming projects. I've started a JAVA-based Algorithms class on Coursera and I will be focused on JAVA and Python for the next few months.


pyjs is a Rich Internet Application (RIA) Development Platform for both Web and Desktop. With pyjs you can write your JavaScript-powered web applications entirely in Python.
pyjs contains a Python-to-JavaScript compiler, an AJAX framework and a Widget Set API. pyjs started life as a Python port of Google Web Toolkit, the Java-to-JavaScript compiler.

What is pyjs Desktop?
pyjs Desktop allows the exact same Python web application source code to be executed as a standalone desktop application (running under Python) instead of being stuck in a Web browser.
For Free Software platforms, most Linux Distributions now come with pyjs and pyjs Desktop pre-packaged: Debian/Testing, FC13, ArchLinux and Gentoo.
For Windows, pyjs Desktop uses MSHTML. Since MSHTML comes pre-installed on Windows (as part of IE), there is very little extra to download (other than Python itself).

Why should I use pyjs?
You can write web applications in Python - a readable programming language - instead of in HTML and JavaScript, both of which become quickly unreadable for even medium-sized applications. Your application's design can benefit from encapsulating high level concepts into classes and modules (instead of trying to fit as much HTML as you can stand into one page); you can reuse - and import - classes and modules.
Also, the AJAX library takes care of all the browser interoperability issues on your behalf, leaving you free to focus on application development instead of learning all the "usual" browser incompatibilities.

 
9 JavaScript tools aimed at easing development
Once considered a script-kiddie toy, JavaScript has become a stalwart scripting language for developing Web applications, and vendors and open source organizations alike are pushing out IDEs and tools targeted at making JavaScript development easier and more reliable.
These tools move beyond familiar JavaScript technologies like jQuery and the growing set of JavaScript libraries to provide Web developers with a plethora of functionality, including debugging and support for HTML5 and other popular scripting languages.
Here is a look at some of the more compelling tools and frameworks for taking your JavaScript Web development projects to the next level.

ActiveState Komodo IDE 7
ActiveState Komodo IDE 7 supports JavaScript development, in addition to other popular Web development languages like PHP, Python, and Ruby. Version 7 backs the Node.js server-side JavaScript environment, offering such capabilities as editing, syntax-checking, code intelligence, and debugging. Support for CoffeeScript, which compiles to JavaScript, is featured, too. Improved syntax checking in Version 7 enables developers to check JavaScript or CSS within HTML.

Appcelerator Aptana Studio 3
Appcelerator's Aptana Studio 3 is an open source Web development IDE that supports JavaScript, HTML, and CSS Code Assist, to aid in authoring. Integrated JavaScript debugging is offered, as is debugging for Ruby on Rails applications. Other features include support for HTML5, Git repository integration, and the ability to customize the IDE. Aptana Studio can be installed as an Eclipse IDE plug-in. Appcelerator, which recently acquired Aptana Studio, also offers the Titanium Studio IDE, which provides similar functionality.

4D Wakanda
4D Wakanda is a JavaScript development platform for building Web and mobile business applications. The included Wakanda Server features a datastore for housing application data and models, and it's run by the WakandaDB NoSQL object engine. WakandaDB leverages JavaScript and classes for an application's business logic. Also featured are Wakanda Studio (a visual designer and code editor) and Wakanda Framework (a client-side framework comprised of interface widgets for the browser front end, a data source layer, and a data provider to communicate with the server).

dotCloud JS
The dotCloud JS software development kit is for building Web applications rapidly with JavaScript and HTML. Applications built with dotCloud JS can be deployed on the dotCloud PaaS cloud. Developers gain access to a selection of cloud APIs without having to write back-end code or deal with servers. APIs access capabilities like data storage and real-time data synchronization. Integration with Twilio and Twitter APIs is also featured. Developers can access 14 cloud services via dotCloud JS. A software stack based on Node.js, MongoDB, Redis, and WebSocket is included as well.

Copy the following lines and start hacking!

dotcloud.ready(function(){
  // your code goes here!
});

Telerik Kendo UI
Telerik Kendo UI is a framework for building HTML5 and JavaScript mobile applications and sites. It incorporates adaptive rendering and leverages JavaScript, HTML5, and CSS3 to adapt a mobile application's native look and feel on any smartphone or tablet while supporting all major browsers. Controls and widgets for building iPad user interfaces are also part of the tool. Kendo also features themes, templates, and an MVVM (Model View View Model) framework.

SproutCore
 The open source SproutCore JavaScript framework is intended to enable development of Web applications with less code. SproutCore applications move business logic to the browser to provide immediate responses to users' taps and clicks; there is no need for round trips across network connections. A binding system is featured for building data-centric applications, leveraging application state and data flow descriptions. Semantic templates allow developers to write HTML and CSS that automatically update when models change. An in-memory database is provided for managing and querying data and synchronizing with a server. Applications build a directory of static assets that can be deployed to any server.

Alpha Five v11
The Alpha Fire rapid application development tool is aimed at building AJAX business applications for Web and mobile devices. Developers can include charts, graphs, and analytics in their applications, enabling users to summarize trends. The tool features JavaScript classes and libraries, and it supports jQuery. JavaScript is generated for the developer, enabling usage by those who are not able to write the code. The tool also leverages CSS3.


Eclipse JavaScript Development Tools
 The Eclipse JSDT (JavaScript Development Tools) is a set of plug-ins for Eclipse aimed at supporting JavaScript application and Web development. JSDT adds a JavaScript project type to the Eclipse Workbench, along with views, editors, wizards, and builders. The tool set features JSDT Core, including a parser and compiler DOM; JSDT UI, with user interface code to create the JavaScript IDE; and JSDT Debug, for debugging JavaScript using Rhino and Crossfire. Also featured is JSDT Web, which supports client-side JavaScript implemented in the Eclipse Web Tools Platform's Source Editing project.

Oracle NetBeans IDE

Oracle's NetBeans IDE supports error-checking for JavaScript, CSS, and HTML, including JavaScript 1.7. The editor also recognizes JavaScript and HTML in XTHML, PHP, and JSP (JavaServer Pages) files. Browser compatibility is provided when developers specify browser types and versions in the JavaScript Options panel. The IDE features an AJAX-ready environment for choosing a server-side scripting language like PHP or Groovy, and integration is enabled for third-party JavaScript toolkits and Web frameworks. Code completion and integrated documentation for JavaScript toolkits like JQuery and Script.aculo.us is provided via the NetBeans JavaScript editor.

Beyond jQuery: 17 JavaScript tools for the HTML5 generation
 jQuery sure seems to be everywhere, and with good reason: Its creators took all of the neat ideas from libraries like Prototype, Dojo, and Yahoo's YUI, then turned them into something easier to use. When jQuery nurtured a fertile plug-in culture, the library became irreplaceable.

In the midst of all of this success, it's easy to forget that plenty of other JavaScript libraries are worth checking out. Some do much the same thing as jQuery, simplifying the basic chores of manipulating the DOM, while offering their own advantages. A number of other libraries offer newer features -- for animation, data visualization, or other niches -- or different ways of thinking about life in the browser. Here are 17-plus JavaScript libraries worth adding to your toolset.


YUI (Yahoo User Inferface)
The Yahoo User Interface Library was one of the first big, cross-browser toolsets released as open source, and it remains one of the biggest and most fertile. Yahoo started version 3 in 2009, and both versions 2 and 3 continue to get better. The collection of charts, widgets, and other tools has more variety than almost any other JavaScript library. Yahoo has also devoted more attention to cosmetic issues than some of the others. Many of the features that drive Flickr and Yahoo Mail are here, and are waiting for your glue code.

Mashi
One of the stated goals of HTML5, at least for some groups, is to replace the Flash plug-in, the gold standard for making sprites and letters dance across the screen. This change is slowly coming as the game industry and the presentation industry start to duplicate some of the sophisticated tools available in the Flash universe. Mashi is an impressive example of how the sprites can be set in motion. It offers more than several dozen standard easing functions for moving sprites along a timeline.

MooTools
Like jQuery and YUI, MooTools offers nice, browser-independent shorthand for manipulating arrays, divs, spans, and whatnot. My favorite part continues to be the custom library construction tool that lets you select the functions you want. Check some boxes and get an entirely optimized version of MooTools with just the functions you need and none of the bloat you don't. That's lightweight.

pp3Dico
The list of game engines for the browser is long and growing longer now that the JavaScript canvas object is better established and relatively consistent. The results don't look as nice as Flash to my eyes, but I suspect that the gap will close dramatically. If you like board games, you'll like the three-dimensional, orthographic views of game boards from pp3Diso. It takes just a few lines of code to set them up.

VideoForEverybody
In theory, nothing could be easier than sticking a video tag into your HTML. In practice, the behavior of so many supposedly standard-compliant browsers is different enough that you'll be pulling out your hair if you try to support all of them. A number of good HTML5 libraries let you write standard HTML5 video tags that will be replaced with Flash or QuickTime if the browser isn't ready to handle your video. The Video for Everybody project offers one of the better libraries, filled with features that operate in the background to smooth delivery on older browsers like IE8.

Raphaël
If the pundits are correct, there are many, many terabytes of data just waiting for people to come along and try to make sense of the bits. The first generation of HTML5 libraries was more focused on building forms and generating tables. Now a number of libraries are zeroing in on building charts and drawing graphs on the object. You'll find plenty of great options for basic line graphs, bar graphs, and combinations. Raphaël is a small JavaScript library that should simplify your work with vector graphics on the Web.

JSChart

Also among the libraries aimed at chart building is JSCharts, which allows you to easily create charts in different templates like bar charts, pie charts, or simple line graphs.

Flot
Flot for its part produces graphical plots of arbitrary datasets on-the-fly client-side, and it includes interactive features like zooming and mouse tracking.

Protovis
Some libraries go even further for data visualization. The collection of demos for Protovis and its newer cousin D3 -- a name meant as shorthand for Data Driven Documents -- show how sophisticated constructions like Voronoi diagrams and network graphs can illustrate more than the up and down of some value.

Simile Widgets
Simile Widgets offers a different collection of views for data visualization that are more focused on maps and timelines. Each of these data visualization projects illustrate how we're just beginning to come up with good ways of turning data into pictures that can help us absorb large volumes of information quickly and efficiently.


Tile5
Most of us will continue to use the big mapping libraries for standard jobs like showing street addresses. But what if you want to do something different, like change the rendering or fiddle with layers in ways the big libraries don't allow? Tile5 can pull the mapping tiles from such sources as GeoCommons, then lay them out so that the user can shove them around just like the maps from Google, Mapquest, or Yahoo. But there are other opportunities: The animation operation can change any of the parameters of the display. This is usually used for panning across the map and landing in one spot.

jQuery Mobile
As the mobile browsers begin to dominate the Web, it becomes more and more important to package the information in a form that's easier to browse on smartphones and tablets. That's not so easy when the fingers are fat and the eyes can't focus on small fonts. jQuery Mobile, Jo, and Sencha Touch are three libraries that offer touch-friendly menus that dig down into data structures and present the information for the small screen.
HTML5SQL
It's easy to forget that cookies can store 4,096 bytes of data. You would never want to store that much because each cookie is bundled together with subsequent trips to the server -- that's why local databases were invented. Taking advantage of them is getting easier as new libraries simplify the details of interacting with the API. HTML5SQL, for instance, will feed relatively simple SQL statements to the database, allowing you to create tables, fill them with data, and then query them. You'll spend more time crafting your SQL than your JavaScript.
TaffyDB
If you don't want to think in SQL while writing JavaScript, TaffyDB accomplishes much of the same tabular querying with JSON, and the queries and the updates can be chained together.
Firebug
One of the biggest challenges for JavaScript programmers is building larger applications, and bigger always means more debugging. While you can get by with embedding alert statements in smaller pages, larger ones require more structure for the debugging information. Firebug, an extension for Firefox, offers an elaborate debugging platform, including conditional breakpoints and the ability to edit the state. The JavaScript can write directly to the console object with three levels of severity.



Blackbird
Blackbird is a stand-alone library that pops up a separate console window that looks quite elegant. You can set four levels of bugs and the user can turn the messages on or off. A profiler is ready to time the routines on the local browser.
Gameboy
This collection of JavaScript libraries only scratches the surface because a wide collection of translators and emulators makes it possible to run practically any language in your browser. Pyjamas is a rich development platform built around a Python-to-JavaScript compiler. The Google Web Toolkit converts Java into JavaScript, and RubyJS converts Ruby. The list of languages that can be emulated is long, and practically nothing is out of reach. Rather than continue to list them, I'll just link to a Gameboy emulator to prove the point.


REQUIRE.JS -  A Javascript Module Loader
RequireJS can help you manage the script modules, load them in the right order, and make it easy to combine the scripts later via the RequireJS optimizer without needing to change your markup. It also gives you an easy way to load scripts after the page has loaded, allowing you to spread out the download size over time.
RequireJS has a module system that lets you define well-scoped modules, but you do not have to follow that system to get the benefits of dependency management and build-time optimizations. Over time, if you start to create more modular code that needs to be reused in a few places, the module format for RequireJS makes it easy to write encapsulated code that can be loaded on the fly. It can grow with you, particularly if you want to incorporate internationalization (i18n) string bundles, to localize your project for different languages, or load some HTML strings and make sure those strings are available before executing code, or even use JSONP services as dependencies.
   
        </span><span style="font-size: 10pt;">jQuery+RequireJS Sample Page</span><span style="font-size: 10pt;">
       
   

   
       

jQuery+RequireJS Sample Page

   



Batch Tools:
Phatch – Python app to batch process photographs for web applications
Phatch is a simple to use cross-platform GUI Photo Batch Processor which handles all popular image formats and can duplicate (sub)folder hierarchies. Phatch can batch resize, rotate, apply perspective, shadows, rounded corners, ... and more in minutes instead of hours or days if you do it manually. Phatch allows you to use EXIF and IPTC tags for renaming and data stamping. Phatch also supports a console version to batch photos on webservers.

Eclipse Plug-in Installation:
  1. From the Help menu, select Install New Software... to open the Install New Software dialog.
  2. Paste the URL for the update site into the Work With text box, and hit the Enter (or Return) key.
  3. In the populated table below, check the box next to the name of the plug-in, and then click the Next button.
  4. Click the Next button to go to the license page.
  5. Choose the option to accept the terms of the license agreement, and click the Finish button.
  6. You may need to restart Eclipse to continue.


No comments: