20 Things I Learned About Browsers and the Web Created by Fantasy Interactive (f-i.com) for the Google Chrome team
Back-end -- the application runs on Google App Engine (GAE) and stores article data in the App Engine Datastore. Most of the server side code is written in PHP, but Since GAE only supports Java and Python natively, the app uses Quercus, a Java implementation of the PHP language (http://www.caucho.com/resin-3.0/quercus/). Some native Java is also used for datastore interactions.
Front-end -- the application takes advantage of many of the latest HTML5 technologies, for which Google Chrome has very good support. These features include: Canvas element animations (for page flip and animated illustrations), HTML5 history API, CSS3 transitions, and offline mode. Much of the JavaScript code uses native methods, but jQuery is also used for cross-browser compatibility.
The app runs on the App Engine server, so you will need to start the app using the App Engine SDK. Download the GAE Java SDK or the Eclipse plugin and start the development server using the appropriate methods detailed in the GAE documentation: http://code.google.com/appengine/docs/java/tools/devserver.html
Once the app is running, you'll want to first run an a sript to populate the datastore with article data. Since 20 Things is now localized, all the content and configuration files are organized by language. This version of the code includes the necessary files for populating the US English content.
To import the US English data, load the following URL in your browser: http://localhost:8080/populateds?locale=0 (replace the port with the one being used by your local development server). When prompted for a username and password, enter 'testUsername' and 'testPassword' (these can be changed in the source code).
Now that you have imported the US English content, you should be able to view the app on the root of your server (ie. http://localhost:8080). The app should redirect you to the /en-US path and display the 20 Things book with US English content.
The main article content can be edited via a lightweight CMS accessible from the /cmshome path on your app. You can add, edit or delete pages and articles from the locale (en-US) you have imported.
To deploy the app to App Engine, create an account on the App Engine site and
then insert the name of your app between the
There's a lot more to the app than what we've just introduced, so explore the code and see what kinds of cool things you can make from it!
If you update JavaScript or CSS files, you'll want to run the Ant build sript (/ant/build.xml) to minify your production code. There is a PHP variable called 'DEVELOPMENT_HOSTS_EXPRESSION' in the /war/locale/locale-base-configuration.php that allows you to specify hostnames in a regular expression that will use the uncompressed JavaScript and CSS files. Any hosts not specified there will use the minified versions.
Quercus is pioneering a new mixed Java/PHP approach to web applications and services. On Quercus, PHP code is interpreted/compiled into Java and 2) Quercus and its libraries are written entirely in Java. This lets PHP applications and Java libraries to talk directly with one another at the program level. To facilitate this new Java/PHP architecture, Quercus provides an API and interface to expose Java libraries to PHP.
Quercus gives both Java and PHP developers a fast, safe, and powerful alternative to the standard PHP intepreter. Developers ambitious enough to use PHP in combination with Java will benefit the most from what Quercus has to offer.
Setting up Quercus
It really couldn't be much simpler. The following servlet definitions need to be added to the deployment descriptor (web.xml) of your project:
<servlet>
<servlet-name>Quercus Servlet</servlet-name>
<servlet-class>com.caucho.quercus.servlet.GoogleQuercusServlet
</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Quercus Servlet</servlet-name>
<url-pattern>*.php</url-pattern>
</servlet-mapping>Now your php code is executable on AppEngine.
20things uses a thin persistence layer as a replacement for the AppEngine Datastore service.
The Google App Engine/J low-level datastore API is simple and elegant, neatly reducing your data operations to four simple methods: get, put, delete, and query. However, it is not designed to be used by the average developer:
DatastoreService persists GAE-specific Entity objects rather than normal POJO classes. DatastoreService Keys are untyped and error-prone. DatastoreService has a machine-friendly but not human-friendly query interface. DatastoreService has an unnecessarily complicated transaction API.
Objectify-Appengine provides the thinnest convenient layer which addresses these issues, yet preserves the elegance of get, put, delete, and query. In short:
Objectify lets you persist, retrieve, delete, and query your own typed objects. Here's a simple example:
class Car {
@Id String vin; // Can be Long, long, or String
String color;
}
Objectify ofy = ObjectifyService.begin();
ofy.put(new Car("123123", "red"));
Car c = ofy.get(Car.class, "123123");
ofy.delete(c);