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