Firefox OS Africa - Phone

We’re back again to continue our blog series on Firefox OS. In this article we are focusing on how to develop the Firefox OS App.
Firefox OS – Part 1: “what is Firefox os?
Firefox OS – Part 2: “Why are you developing the Firefox os App?

We all know about HTML (HyperText Markup Language) – if you don’t, then it’s time to start learning about it – it’s the basic technology for developing any web application. It is the essential and fundamental skill for any web developer or any developer in general. Each one of us should know about HTML – even people who aren’t techy! It is a form of programming language that is used to make web pages viewable on the Internet.

Brief History of HTML
HTML was invented by Tim Berners-Lee to enable CERN (European Organization for Nuclear Research) researchers to share documents with each other; he announced this on the Internet via Berners-Lee in 1991. Tim Berners-Lee specified the HTML and wrote the browser and server software. Now it is controlled by the World Wide Web Consortium.

Firefox OS Africa - Develop App 1

Why Should I learn about HTML?
HTML is the leading language of the Front-End special web pages. It also helps introduce beginners to the programming world. To develop a static website (Front-End), you need to learn about HTML, CSS and Javascript.
“Note”:~Front-End: is the viewable design for the client side of the project which consists of HTML, CSS, Javascript.
Back-End: is the part that deals with the server and the database and it uses any web programming language like php, python, ruby or javascript (nodejs).

HTML in practice
HTML is very different from any famous programming language. It is a markup language which consists of tags. These tags define content which will be displayed on the page like  (words, images, audio, video, and so on).  Tags are enclosed by angle brackets, and the closing tag begins with a forward slash – something like ( <p>HTML is super easy, isn’t it? </p>).
Note: All the browsers allow you to view the html of any page. In Firefox for example, press “Ctrl+U”.

Firefox OS apps and HTML
As most of you know, Firefox has released its OS and announced that its applications will be implemented with the same stack of the web technologies (HTML, CSS, JS). This is great because this makes it super easy to implement, install and run Apps offline like any mobile application. By knowing HTML you will be able to implement your first mobile application using some advanced APIs to access and interact with the device’s features.

Problems of HTML
However, HTML is an easy interactive language with a simple language structure, and it has a lot of drawbacks which need to be mentioned.
First of all, HTML is not a programming language, so it doesn’t have loops to iterate over elements and variables to temporarily store data. Also, HTML is not DRY (Don’t Repeat Yourself) which means you usually write repetitive codes which is a bad practice in programming. These drawbacks will make implementing HTML very tedious for most of us and take more time for writing useless and error-prone codes. The good news though is that template engines are the solution for all these HTML problems which we will talk about in the next section.

Firefox OS Africa - Develop App 2

Template engines (pre-processors)
Template engine is a tool that gives us the ability to write dynamic and reusable HTML documents by writing code with another language called “templaing language”  then converting the code to native HTML code.

Templating Languages
Templating language is a language that looks like HTML but with more features, functionalities, and with easier and shorter syntax than HTML. Some of the features that are supported by template languages are (“iterations, variables, mixins, inheritance and so on”). The following code snippet illustrates the difference between HTML and a template language called “Jade

HTML code
<!DOCTYPE html>
<html>
<head>
<title> HTML and Template engines </title>
</head>
<body>
<p class=”className” id=”idName”> Hello Mozillians! </p>
<img src=”images/image.png”>
</body>
</html>

Jade (template language) code
doctype html
html
head
HTML and Template engines
body

p.className#idName Hello Mozillians!
img(src=”images/image.png”)

As you see above, Jade is indentation and whitespace based which means each level of indentation creates an HTML element. There are no “end tags” for elements `</endTag>`. Classes and Ids are created with (.) and (#) respectively.

Template Engines with Firefox OS apps
You can use template engines in the development process of your Firefox OS Apps, which will improve and speed up your productivity. Instead of spending time writing and fixing unintentionally missed end tags, you’ll write less and have valid codes with the template language which will make you focus on the real actions implemented with the JS code. I can assure that once you start learning and using it, it’ll become an indispensable tool for you.

Wrapping Up
In this article we’ve introduced you to template engines and how productive it would make you when writing your HTML code. If you want to learn about template languages check out this link. Finally, there are a lot of tools on the web, you just have to find the right help to finish your job in the most efficient possible way.

Author: Nouran Mahmoud

FacebookTwitterPinterestGoogle +Stumbleupon
Written by Firefox Admin