Fast static website creation and deployment
Over the past few years, I’ve been building static websites from starter CSS frameworks such as Bootstrap and Foundation,
Learning JavaScript: web application architecture
I’ve been talking about front end, middle tier, and back end in my previous posts. Here’s a diagram to show how the components interact with each other. Additionally, there is an example of this web application architecture using Ruby on Rails in my Github project.
Learning JavaScript: part I
Recently I spoke with several individuals wanting to build web applications. First I describe what a web application is, describe the front tier of a web application, and focus on JavaScript’s role for the front tier.
Web Applications
Web applications comprise of three tiers: front end, middle tier, and back end. The front end is required for writing interactive applications; the middle tier and back ends are necessary for sharing information between computers using the Internet. For example, I have a completely front-tier app for Kinematic Templates (cursor manipulation drawing software): it does not need the Internet to run. Middle tiers and back ends are required for websites that handle data from multiple people. One approach for building a middle tier is through REST APIs (see other posts). RailsBridge (a bridge for learning Rails) provides excellent resources for building a Ruby on Rails back end.
Front Tier MVC
Let me focus on the front tier in this post. The front tier is composed of a model, view, and controller. The model is represented in HTML, a markup language that describes the content of a web page. A person can see HTML in a web browser by choosing the “View Source” option. The view describes how the page should appear, which is provided using Cascading style sheets (CSS). If omitted, a default CSS is presented in the web browser. Many web pages today, however, mash the model and view together, but they could and should be separated. Finally, the controller affects the behaviour of a web page. It allows a web page to respond to clicks, typing, and other events without reloading a web page. The only language supported natively in web browsers for the controller is JavaScript.
JavaScript
JavaScript is a programming language that can modify a web page’s behaviour. But, it is more powerful than just for web pages. It can run a middle tier and back end using Node.js, but that is a topic for another post. In this post, we are going to cover some basic resources for learning JavaScript. We need to know JavaScript the language and then how to modify a web page using JavaScript.
JavaScript: The Language
Many resources are available on the web for learning JavaScript. Many of these resources, however, are outdated as the JavaScript language has evolved. The most recent version of JavaScript is 1.8.5 in July 2010. So when looking for online resources, a reader has to make sure they are reading the most recent edition. I suggest the following book from my own experience:
JavaScript Programmer’s Reference
Alexei White
Wrox Press, 2009 (1032 pages)
ISBN:9780470344729
I found the following chapters useful (below). I omit half the book from this reading list: many new JavaScript libraries are now available, e.g., jQuery, underscore.js, and backbone.js. They provide design patterns for using JavaScript in a web browser. I’ll blog about JavaScript in a web browser in another post.
- Chapter 1 – Introduction to JavaScript
- Chapter
Pains in web development
On Saturday July 21st I had a nice conversation with Caleb Clausen about web applications. HTML and the web was originally designed for document delivery, not interactive applications that we are using today. Certain features such as vertical layout, thus, were not incorporated into the fundamental design of web pages. This makes it challenging to create web applications that use window space effectively. Also, drawing a non-horizontal line without using HTML 5 (i.e., scalable vector graphics) is difficult. Given the popularity of older non-compliant web browsers such as Internet Explorer, there is not much choice but to hack websites until they look right.
Firefox OS / Boot to Gecko: a phone OS written in a web browser
[Update] Announced July 2nd, Boot to Gecko is now Firefox OS.
On June 26th, 2012 I attended the HTML 5 meetup in Microsoft’s local sale office. This HTML 5 meetup invited Rob Hawkes and Chris Heilman from the Mozilla non-profit foundation, which created Firefox, to present their work on the Boot to Gecko project. They flew in from their office in London, England, also for the Google I/O event. Approximately 500 people signed up to this event, with attendance roughly 200 people.
Boot to Gecko is an operating system for phones, which joins the family of Android and iOS phone operating systems. The main selling feature of this new operating system, which was first released 8 months ago, is its open-sourced nature. Above the hardware layer, the operating system runs the Gecko web browser engine, which we are all familiar with: we use this web browser engine every time we open Firefox. The operating system provides a touch-enabled user interface through Gaia, which runs on Gecko. Gaia is novel in that it is written all in HTML 5, JavaScript, and CSS. Gaia calls into JavaScript APIs provided by the operating system.
The advantages of using Boot to Gecko are cross-platform mobile development, standard web technologies, and low cost of licensing. The industry movement is supporting cross-platform HTML 5 on Windows, Mac, Android, and iOS. HTML 5 is a standard that is already being adopted in web browsers, which is being extended to the whole device’s experience. HTML 5 standard does not require licensing to build projects.
Boot to Gecko is not the first or only endeavour to build a web browser operating system. Google Chrome OS is a web browser operating system for desktop computers. We may now ask why Boot to Gecko will be more successful than Chrome OS? Chrome OS does not displace existing desktop OSes such as Windows, Ubuntu, and Mac, all of which are more function-featured. In contrast, many reasons make Boot to Gecko a compelling competitor. First, the ecology of mobile devices is still fragmented with different iOS and Android phones. Considering the historical PC and mainframe market (cite Computer History Museum), we know that this fragmentation will become a few large players in the foreseeable future. Second, people are running older feature phones that do not benefit from modern OSes. Boot to Gecko will be compatible with these phones, bringing them to the modern age. An example market is Brazil where Boot to Gecko is partnering with telecoms to deploy this OS. Third, applications written for this OS will be runnable in web browsers too, so there is low risk to adopt.
Boot to Gecko has a competitor, Tizen. It remains to be seen which one of these hardware-accessible API projects will succeed.
Now let me review the APIs provided by Boot to Gecko, which are all accessible by JavaScript:
- Touch and gestures
- Camera
- SMS
- Telephony
- Vibration
- NFC
- Bluetooth
- USB
- Battery
- Full screen
- Screen orientation
- WebGL
I foresee the main risk here is security holes because websites could conceivably get access to these same APIs.
How to try Boot to Gecko? Firefox Nightly is able to run these new APIs. It is merely a matter of opening a URL in the web browser to Boot to Gecko’s emulator, only for Linux and Mac.
https://developer.mozilla.org/en/Mozilla/Boot_to_Gecko/Using_Gaia_in_Firefox
Creating HTML 5 mobile applications
On Thursday June 21st I attended the PhoneGap meetup at Adobe’s office, which was the old site of Macromedia. In this PhoneGap meeting Marcos Lara presented his Audiovroom project. He introduced several technologies that would be useful for creating HTML 5 applications, at the visual layer, front-end logic, and back-end logic layers.
Visual Layer
Visual layer technologies include HTML 5 and CSS 3. HTML 5 is a presentation markup language that is becoming the de facto standard for web, mobile, offline, and online applications. HTML 5, though, should only be used to present content. CSS 3 is the presentation markup language for modifying the appearance of widgets. CSS has media queries, which allows developers to detect the screen resolution and orientation of a web page.
Front-End Logic Layer
The logic layer is separated into front-end (running on the device/web browser) and backend languages. The predominant front-end language for application logic is JavaScript, which is readable by anyone. Many JavaScript libraries such as backbone.js, underscore.js, and jQuery are available. Alternative front-end languages include Flash, Shockwave, and Silverlight, but these technologies are expected to be displaced by HTML 5.
Back-End Logic Layer
Many backend languages for HTML 5 applications exist. Provided that a REST+JSON API is provided to the front end logic layer (namely through jQuery on the client), the server can be written in any number of traditional programming languages such as Java and C#. Scripting languages can be used too such as JavaScript and Python. Node.js is popular for providing a JavaScript backend server. Modern functional programming languages such as Scala and Ruby are also candidates for backend logic.