If you are an experienced web developer, I dont recommend it, but feel free to skip this chapter. Its important to brush up on the fundamental concepts before moving forward. Why? Maybe you have heard and are familiar with some terms, but wonder what they actually mean. Another good reason is that this chapter will cover the RESTful API in a very beginner-friendly manner. REST is used in virtually all modern web architectures, and well use it in the book a lot. There is one last reason: Youll look smart at a cocktail party or in front of your colleagues and your boss by acing the hodpodge of web acronyms.
Front-End Definitions
Front end is a term for browser applications. In some conversations, it could mean servers facing the requests first. However, for this book we assume that all front end is limited to the browser and mobile apps and their code.
Front-end development, or front-end web development, implies the usage of various technologies. Each of them individually is not too complex, but the sheer number of them makes beginners timid. For example, there are Cascading Style Sheets (CSS), Hypertext Markup Language (HTML),Extensible Markup Language (XML), JavaScript, JavaScript Object Notation (JSON), Uniform Resource Identifier (URI),Hypertext Transfer Protocol (HTTP), and many other abbreviations.
In addition to the low-level technologies, there are numerous frameworks, tools, and libraries; for example, jQuery, Backbone.js, Angular.js, Grunt, and so on. Please dont confuse front-end frameworks with back-end frameworks: The latter run on the server whereas the former run on the browser.
Front-end web development consists of these components:
HTML or templates that compile to HTML
Stylesheets to make HTML pretty
JavaScript to add interactivity or some business logic to the browser app
Some hosting (AWS, Apache, Heroku, etc.)
Build scripts to prepare code, manage dependencies, and do pretty much anything thats needed
Logic to connect to the server (typically via XHR requests and RESTful API)
Now you know what a job that has the title of front-end developer entails. The great payback to mastering this hodgepodge is the ability to express your creativity by building beautiful and useful apps.
Before we start building, lets cover a birds-eye view of the web request cycle.
Web Request Cycle
This is important for someone very new to the web development. The whole World Wide Web or the Internet is about communication between clients and servers. This communication happens by sending requests and receiving responses. Typically browsers (the most popular web clients) send requests to servers. Behind the scenes, servers send their own requests to other servers. Those requests are similar to the browser requests. The language of requests and responses is HTTP(S). Lets explore the browser request in more details.
The web request consists of the following steps:
A user types a URL or follows a link in his or her browser (also called the client).
The browser makes an HTTP request to the server.
The server processes the request, and if there are any parameters in a query string or body of the request, it takes them into account.
The server updates, gets, and transforms data in the database.
The server responds with an HTTP response containing data in HTML, JSON, or other formats.
The browser receives the HTTP response.
The browser renders an HTTP response to the user in HTML or any other format (e.g., JPEG, XML, JSON).
Mobile applications act in the same manner as regular web sites, only instead of a browser there is a native app. Mobile apps (native or HTML5) are just another client. Other minor differences between mobile and web include data transfer limitation due to carrier bandwidth, smaller screens, and the more efficient use of local storage. Most likely you, my reader, are a web developer aspiring to use your web chops in mobile. With JavaScript and HTML5 its possible, so its worth covering web development closer.
Mobile Development
Is mobile going to overtake web and desktop platforms? Maybe. For now the mobile development field is extremely immature and new. Its good if you are a pioneer, but most of us are not. This is a bigger gap in tooling and libraries compared to web. The gap is closing. With HTML5, you can write once and reuse code on mobile. There are other approaches as well.
These are the approaches to mobile development, each with its own advantages and disadvantages:
Native: Native iOS, Android, Blackberry apps built with Objective-C and Java.
Abstracted native: Native apps built with JavaScript in Appcelerator ( http://www.appcelerator.com ), Xamarin, ( https://xamarin.com ), Smartface ( http://www.smartface.io ) React Native or similar tools, and then compiled into native Objective-C or Java.
Responsive: Mobile web sites tailored for smaller screens with responsive design, CSS frameworks like Twitter Bootstrap ( http://twitter.github.io/bootstrap/ ) or Foundation ( http://foundation.zurb.com/ ), regular CSS, or different templates. You might use some JavaScript frameworks for the development like Backbone.js, Angular.js, Ember.js, or React.js.
Hybrid: HTML5 apps that consist of HTML, CSS, and JavaScript, and are usually built with frameworks like Sencha Touch ( http://www.sencha.com/products/touch ), Trigger.io ( https://trigger.io ), JO ( http://joapp.com ), React Native ( https://facebook.github.io/react-native ), or Ionic ( http://ionicframework.com ) and then wrapped into a native app with PhoneGap ( http://phonegap.com ). As in the third approach, you probably will want to use a JavaScript framework for the development, such as Backbone.js, Angular.js, Ember.js, or React.js.
My personal favorites are the second and fourth approaches. The second approach doesnt require a different code base. A minimal viable product (MVP) can be built by just adding a single link to the CSS library. The fourth approach is more powerful and provides more scalable (in a development sence) UIs. This is better suited for complex apps. Code reuse between cross-platform mobile and web is easy because most of the times youre writing in JavaScript.
HyperText Markup Language
HTML is not a programming language in itself. It is a set of markup tags that describe the content and present it in a structured and formatted way. HTML tags consist of a tag name inside of the angle brackets ( <> ). In most cases, tags surround the content, with the end tag having forward slash before the tag name.
In this example, each line is an HTML element:
Overview of HTML
HTML is a ...
rel="stylesheet" type="text/css" href="style.css" />
An HTML document itself is an element of the tag, and all other elements are children of that tag:
![Azat Mardan [Azat Mardan] - React Quickly](/uploads/posts/book/119471/thumbs/azat-mardan-azat-mardan-react-quickly.jpg)
