Four HTML5 and JavaScript Frameworks To Jump-start Your App Development

Let’s just face the facts: Flash is dying, platform/browser agnostic development is in, and Windows 8 is bringing HTML5/JavaScript to desktop development. Love it or hate it, as a developer you’ll probably need to familiarize yourself with the finer points of HTML5 and JavaScript-driven application design, but where does a person start? Traditionally HTML and JavaScript are used for website markup and making pretty transition effects, so how do we get from high school level web design to making HTML5/JS a realistic front-end for enterprise class applications?

HTML5/JS frameworks are beginning to pop up as viable development environments for the entire range of web-based applications, from desktop to mobile. Here are four HTML5/JS tools that will turbocharge your apps and keep you savvy with this new trend in development.

1. Yahoo! Cocktails

Yahoo recently announced its newest mix of HTML5, CSS3, and JavaScript tools, and believe it or not, Yahoo still knows how to bring decent services to the table. Cocktails brings existing Yahoo! services like YQL and YUI together with HTML5/JavaScript tools for rapid multi-device and multi-platform development. The most impressive aspect of Cocktails is its integration with Yahoo!’s Mojito, which allows JavaScript functionality for your apps even if the device has JavaScript disabled by running scripts on the server side. Yahoo! isn’t dead yet!

2.  SproutCore

SproutCore is an open-source set of tools built using MVC (model-view-controller) architecture for creating universally accessible, scalable, and speeding applications. The team that created SproutCore offers many easy-to-follow guides for beginners, and the well-established community of developers make troubleshooting relatively pain-free. Of the frameworks I’ve encountered, SproutCore is the most polished…and it doesn’t hurt that it’s free.

3. LimeJS

If your forte is creating web-based games, LimeJS is a framework for rapid development of native-experience touchscreen apps for mobile devices or desktop browsers. This simple but flexible tool set is free to download and takes the headaches out of creating rich cross-platform user experiences with standardized code and solid community support.

4. Sencha

The only non-free framework on this list, Sencha is meant for industrial strength app development. Sencha offers an array of tools like a visual designer, rich spreadsheet support, CSS3 animator, and skinning to put a unique look and feel to your application. The Sencha API allows for rapid development for touchscreens or standard desktops, and while it isn’t free to download, Sencha provides professional support and training for its customers. User interface, app functionality, and data connectivity — Sencha does it all.

Conclusion

Will HTML5/JavaScript bring about the downfall .NET/WPF app development? Not anytime soon. But if you’re looking to bring your application to as many users and devices as possible, HTML5/JS is your ticket to fame. These frameworks will get your started, and if you have a favorite not listed here (there are many), please leave it in the comments.

Add Variables, Operations, and Functions to Your CSS with the LESS Dynamic Stylesheet Language

As a programmer, the most frustrating part about working with CSS is the redundancy. If you’re designing a layout with a strict color and font scheme, you can find yourself copy/pasting the same same snippets over and over…and what if that scheme changes? You get to track down each element, which takes forever even with search/replace.  What programmers crave for CSS is the ability to give dynamic behavior to a static sheet. LESS is coming to the rescue.

The LESS Dynamic Stylesheet Language is a brilliant little piece of Javascript (just 34 KB!) that you can add to your web pages to bring your CSS the power of a full-blow programming language. Installation is a snap: simply include a line of code after your other stylesheets, and suddenly you have the ability to use variables, operations, and functions in your CSS. LESS is compatible with IE6+, Webkit, and Firefox and will simplify the way you code.

Variables and Operations

Let’s paint an example:  what if you wanted to set a variable to convey a constant color or size throughout your stylesheet? No problem, just employ an @variable and your coding (and updating) just got a lot faster. Need to use basic operations to scale up font size? LESS supports that, too.

Functions

Maybe you want to reduce code redundancy by assigning multiple lines of code to a single word. LESS functions have you covered. Better yet, the functions support parameter variables for added flexibility — you won’t believe how groomed your code will look.

With LESS you can reduce your coding time and simplify your updating process by eliminating redundancies and employing basic concepts that programming languages have enjoyed from the very beginning. Save time and eliminate the clutter by adding LESS to your web development tool belt.

Want to Create a Web Application? Use CakePHP for Rapid, Secure Development

So you’ve got a sweet idea for a web application—great, let’s get to work! You’ll need a basic GUI, some sort of user registration, a templating system, logic processing, error handlers, form verification, AJAX processing, and… woah, this is adding up in a hurry. At what point do you get to start making the app itself?

What you need is a framework that will accelerate your app development by offering an easy way to employ common components to a site and the flexibility to quickly add custom logic.  This is where CakePHP enters the stage.

CakePHP is a PHP framework that simplifies the way you do programming. What do I mean by “framework”? This concept is best explained by making a comparison with traditional application scripts: a typical PHP script starts at the top and proceeds to the bottom while utilizing included classes to create objects and processes the intended logic. An error in your syntax ruins everything, and you need to manually code database connections and other activities not native to the language.

However, in a framework, you simply extend existing (and rigorously tested) libraries. For instance, CakePHP has the ability to “scaffold” a database table, where you simply provide a line code describing the table, and poof—the framework will display a basic interface for inserting, updating, and deleting records. No, really, it’s that easy… and that just skims the surface of CakePHP features.

So, the question really boils down to this: Why should you waste your time learning to use CakePHP? I’ll give you three solid reasons.

Faster development

You may or may not have any appreciation for online dating sites, but I think we can all agree that it would be a complex project if we had to build one from scratch. Ever heard of Mingle2? Yeah, me neither, but it’s a dating site that boasts 100,000+ users and was made with CakePHP in 66 hours. 66 hours. Let’s put this in perspective—this man started and finished production of a large scale social network in less time than it took me to beat Final Fantasy 7 the first time through. Impressive? You decide.

CakePHP shaves a lot of time off your typical coding assignments by letting you create a few lines of code that utilize the backbone libraries built into the framework. Do you need your application to send email? No problem. Do you want to verify a form to make sure the user is entering a credit card number? CakePHP has you covered. Need to interact easily with a mySQL database (or others)? Easy shmeasy.

On a lesser note, the package is a piece of cake to install. (See what I did there?)

Structure, security, and scalability

These are all pretty broad topics, but I’ll keep the description concise—CakePHP’s Model-View-Controller system (MVC for short) changes the way you program by establishing conventions that will simplify the creation of your app. In essence, the Model dictates how your app will interact with the database and the Controller will process this information in a way you dictate, finally delivering it to the View for display to the user. Consequent to this structure, the application has better access to data objects, files are shorter and better organized, and since we rely on CakePHP convention and library files, the app tends to be properly positioned for scalability.

For a much more detailed look at the way CakePHP processes an app, glance below on the left.  Next to that is how most app processing paradigms look. Sad, right? I know, I’m embarrassed, too.

Let’s not forget that security in app development is often sorely neglected. Fortunately, CakePHP protects forgetful programmers by offering protection from database injections and AJAX vulnerabilities. Did I mention the built-in regular expressions? If you’re like me, those will save your butt more than once.

It’s PHP

This may seem like a minor point, but think about it—PHP is supported on nearly every hosted server on Earth (20 million domains utilized PHP in 2007). PHP is also a freely distributed packaged that integrates perfectly with free server software such as Apache. Can you think of a better environment for developing an application with a limited budget? Don’t say McDonald’s Playland. Don’t you dare say it.

CakePHP also allows you to inexpensively and easily switch your current PHP practice to a rapid deployment framework. Not many things are more depressing (or expensive) than telling your team of PHP developers that they need to abandon their expertise to shift focus to a different language. With CakePHP, it probably won’t be necessary.

Conclusion

CakePHP will improve your app development experience in a lot of ways, but guess what—it isn’t the only PHP framework in town. Other frameworks such as Zend and Symphony have had great success and, like CakePHP, are robust options with large support communities. You may consider adopting Symphony if you prefer XML for designing databases, and you may hold a preference for Zend (which is more like a collection of libraries than a true framework) if you require tight integration with other platforms such as Facebook or Google APIs. Of course, there are even more than just these options from which you can choose.

Hopefully this brief summary of CakePHP was enough to convince you of the benefits of developing within a framework. Sure, ground-up development has its uses, but when developing a large, scalable app why reinvent the wheel? Hasten the process with a framework while improving organization and security. To whet your appetite with more details concerning CakePHP, visit their forums and have a look at their online book to better weigh your options.

Click here to see some sites developed in CakePHP. AskMen.com, Mozilla Firefox Add-ons, and Yale Daily News are among them!

Join the growing community of CakePHP developers and see what all the fuss is about. Sorry, I mean, “see about what all the fuss is”. That doesn’t seem right, but you get the picture. Happy programming!

Image credit: Nathan Eal Photography, Paul Downey

Create your own Apache, MySQL, and PHP testing server with WAMP

PHP, MySQL, and Apache have become prominent ingredients in small and large website alike. After all, they are free, robust, and they each have a large community of supporters from which to troubleshoot. However, unless you have a server on which to develop your application, you won’t be able to enjoy these platforms or the, “Hey! Look what I did!” sense of satisfaction inherent to web app development. Many of us don’t have access to a hosted server with these components installed, so how do we go about setting up a local server on our personal PCs?

Many developers will argue that the best way to create a testing server is to install these packages individually from each organization’s homepage (here, here, and here), since it is the only way to be completely certain of the packages’ configurations. In that sense, I agree, but there are a number of pre-packaged installers that will get you to basically the same destination while alleviating most of the headaches that oftentimes go hand-in-hand with manual installation.

Some popular PHP/MySQL/Apache bundles include:

For the purposes of this guide, I will be using WAMP Server 2.0i which, at the time of this post,  includes Apache 2.2.11MySQL 5.1.36, and PHP 5.3.0.

To setup a testing server on your PC, you will need:

The installation dialog (shown below) is pretty straightforward. You will be asked for a location to which you will install the PHP, MySQL, and Apache directories. While the location you choose doesn’t particularly matter, I chose to save it to C:\wamp simply because it allows for easy access of the configuration from a command prompt, should that become necessary.

Installation completes fairly inconspicuously, and you’re left with a WAMP shortcut on your Desktop, as well as a tiny gauge-looking icon on your Taskbar.

The control panel (shown below) is a major convenience that makes WAMP such a joy – you can access most worthwhile aspects of your server configuration without messing around in the guts of your configuration directories. The server can be stopped, started, and restarted from this panel, and many options for each component can be modified.

Right off the bat you’ll want to designate the directory that Apache uses as the root directory for your server. This can be done by editing the httpd.conf file, as shown below.

Within the Apache configuration file, httpd.conf, you’ll want to look for two lines of code – one that begins DocumentRoot and one that begins >. In an unaltered configuration file, you’ll find these on lines 178 and 205, as shown below. The DocumentRoot property tells Apache where to find your site files and can be left as is, or changed to something more convenient. I have my site folder set to a directory within my Dropbox. Be mindful that you only use forward slashes, or Apache will get confused and download in its pants.

The same location used for DocumentRoot should be pasted into the line below it (line 205 in the picture). Save the file (File > Save) and close the document.

WAMP offers a convenient way of showing which modules are activated in your configuration in the Apache modules menu. I should note that by default the rewrite_module (often used to beautify URLs) is not activated. Many PHP programs, such as WordPress and CakePHP rely on this module, so it may be worth your while to activate it.

Similar to the Apache configuration menu, PHP settings and extensions can be modified in the WAMP control panel. By default, many commonly used extensions are not activated, including Curl. Simply go through the list of extensions in the PHP extensions folder of the control panel and select the ones you wish to use. You can also directly access the php.ini configuration file from this folder, if necessary.

Now that the server is configured, you may want to make a test file to see if everything is working properly. We’ll call our test file test.php and we’ll place it in the site folder (root) designated in the httpd.conf file I referenced earlier. Your test.php file should contain the following code:


Save your file, go to your WAMP control panel, and select Restart All Services. Wait just a few seconds for the server to reset (which employs all of the changes we made) and direct your browser to http://localhost/test.php . If your configuration is working properly, you will see a page outlining your PHP configuration, which indicates that both Apache and PHP are working properly (below).

Finally, to test that MySQL is working properly, direct your browser to http://localhost/phpmyadmin (the administrative area for your databases). If you see the page below without errors, you are ready to roll. Note that by default the root password is left blank. If you plan to have your MySQL configuration remotely accessible, you can change and add users in the user table in the mysql database.

So there you have it – This local server configuration will allow you to develop rich applications without the fuss and corruption of constantly FTP-ing files to your hosted server. WAMP simplifies the process of installing and maintaining services for your local testing server. Enjoy!