Front End Tech Overview

hushedsnailInternet and Web Development

Nov 12, 2013 (3 years and 8 months ago)

120 views

Front End Engineering



1.

Demystifying the Web

o

Content on the Internet, including the World Wide Web (WWW), can be const
ructed
using a vast variety of technologies


proprietary as well as open
-
source


and in
virtually every instance these technologies interact with each other to construct the
overall product/experience. However, with respect to the WWW, there are a few
st
andout technologies that are virtually universal in their presence, and are
considered to be
web standards

by the W3C (World Wide Web Consortium), the
main international standards organization for the web. In the realm of web
development, these technologie
s are:



HTML



as close to universal as internet languages go. The latest version of
the HTML standard is
HTML5



which in addition to
markup

functionality
also has features that allow for a degree of
programming

functionality by
linking Hypertext documents

to various
APIs

which can perform traditional
software functions.



CSS



acronym for
Cascading Style Sheets
. This is a
stylesheet

language, which
allows for the styling of multiple HTML pages at once. Because most
webpages are created
dynamically

upon user

request, this technology can
greatly reduce the amount of manual styling of webpages necessary by
linking a common CSS file to a “master” HTML page
.



Javascript



one of the most widely used
scripting

languages used on the
Internet. Scripting languages enable
interactivity

within websites


from
basic drop
-
down menus and scroll bars, all the way up to full multi
-
tiered
software applications (embedded within the webpage) that can perform
complex functio
ns



e.g. a health calculator that takes multiple inputs and produces a
comprehensive health report; a weather button that takes a user’s
zip code and gives the 7 day forecast for the area.



XML



a “skeletal” markup language that allows individual develope
rs to
define structure for any type of document
, such that it can be read by both
Humans and Machines. This standard allows for the interexchange of
documents between different computers

and different applications



HTML can be thought of as a subset of XML,

as HTML is nothing more
than a (large) set of tags that define how a hypertext document
should be structured and rendered within a web browser.



E.g. If we made an XML schema for “email” with 4 tags: <Message>,
<Author>, <Content> and <Date>, we could writ
e a piece of software
that can read and manipulate “emails” that look something like this:



<Message>



<Author> Christian Free </Author>



<Content> This is the body of the email. </Content>



<Date> 7/19/2013 </Date>



</Message>


2.

The Wonderful World of
Javascript

o

The ability of a user to not only
view

content on a website, but to
interact

with them
in increasingly complex ways, is a defining feature of so
-
called “Web 2.0”. Therefore,
the role of scripting languages in web development has evolved massivel
y, and
Javascript is among the most prominent languages

used for scripting on the
internet.
As a consequence, many libraries and frameworks have emerged to

aid in
Javascript development, both
for
controlling

web pages

and
developing web apps



When
controlling

web pages,
t
he most common use of
JavaScript is to load
new page content and/or submit user inputs to the server, without having to
reload the entire website. This is achieved through
AJAX

(Asynchronous
Javascript and XML).



Other controls made
possible by Javascript include: Animating page
elements (fading in/out, resizing, moving, etc.), creating interactive
content (simple games, audio/video playback, etc.), validating inputs
on web forms for acceptability, and transmitting user browsing
habit
s between websites (e.g. ad tracking, personalization, etc.)



Some common libraries/frameworks used in this capacity include
(but are definitely not limited to):



jQuery



Prototype



Script.aculo.us



Ext.js



MooTools



When
developing web applications
, defined as a
pplications embedded
within webpages, Javascript
can be thought of as a full
-
fledged
programming

language, just like a Java or C#, and can be used to build full
-
stack
applications (including client and server
-
side modules). Given that these are
embedded wi
thin webpages which likely contain Javascript scripts (above),
these applications

tend to perform better than web apps built with other
technologies.



Some common libraries/frameworks used in this capacity include
(but are definitely not limited to):



YUI
(Yahoo User Interface)


developed at Yahoo R&D



Node.js


the most popular framework for developing server
-
side modules in Javascript



Angular.js


Used to build “single page” applications in an
MVC pattern



Backbone.js


also used to built single
-
page apps
and keep
various application parts synchronized



Underscore.js


provides additional functionality to
Backbone.js
-
based applications, incorporating elements from
scripting libraries like Prototype



ANYTHING
.js


if you see a technology ending in .js, its ver
y
safe to assume it is a Javascript framework of some sort, and
is likely to be used in a web application development context.