Front-end development

for TAG

Who am I?

Viktor Shevchenko

Team Lead at BMC

Doing front-end development since 2010

skype: sv.contact

twitter: @vict_shevchenko

Front-end development

from Wiki

The practice of producing HTML, CSS, and JavaScript for a website or Web Application so that a user can see and interact with them directly.

Agenda

HTML
CSS
JavaScript
CV review

HTML

HyperText Markup Language

HTML

Pure Text

HTML

Hello, TAG

<b>Hello, <i>TAG</i></b>

Browser

Server

HTML

HTML structure

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>HTML Document</title>
   </head>
   <body>
      <p>
         <b>
            This text is bold <i> and this one is italic also</i>.
         </b>
      </p>
   </body>
</html>

Head

Body

Store system information, that is responsible to tell browser how to render content

Store content that should be rendered

HTML

HTML 2.0 — 1995
HTML 3.0 — 1995
HTML 4.0 — 1997
HTML 4.01 — 1999
HTML 5 — 28 октября 2014
HTML 5.2 — 14 декабря 2017 года

HTML template engine

Not very popular at this moment due to JS frameworks popularity,

that have built-in templating mechanisms

HTML semantic

<a> - link

<p> - paragraph

<h1> - <h6> - header

<img />

<table> - table

<div> - block

<img src="some-image.jpg" />

<a href="http://google.com" style="color: red">Google it</a>

children (content)

attributes

HTML

<a href="http://google.com" style="color: red">Google it</a>

... 

...

<a href="http://google.com" style="color: red">Google it</a>

<a href="http://google.com" class="my-link">Google it</a>

... 

...

<a href="http://google.com" class="my-link">Google it</a>

CSS

Cascading Style Sheets

.my-link {
    color: red
}

a {
    font-size: 18px
}

CSS

Styling of HTML elements
Avoid duplication of code
Detect window dimension and style differently

CSS History

CSS 1 - 1996
CSS 2 - 1998
CSS 3 - 2011 (Module structure)

CSS Tools

CSS in JS

CSS frameworks

JavaScript

Programming language of the web, not only

JavaScript is a high-level, dynamic, untyped interpreted programming language that is well-suited to object-oriented and functional programming styles. JavaScript derives its syntax from Java, its first-class functions from Scheme, and its prototype-based inheritance from Self.

developed in 10days in May 1995 by Brendan Eich
first shipped in beta releases of Netscape Navigator 2.0 in September 1995
In November 1996, Netscape submitted JavaScript to Ecma International for consideration
In June 1997, Ecma International published the first edition of the ECMA-262 specification
In June 1998 the second edition was released
December 1999 - The third edition of ECMA-262 was published
December 2009 - The fifth edition was released
June 2015 - ECMAScript standard is 6 released
The current edition of the ECMAScript standard is 8, released in July 2017

* fourth edition was never released

JavaScript does:

Creating visual effects on the page.
Calculation.
Working with text, arrays, dates, and regular expressions
Input data validation.
Dynamically change page content.
Interaction with the server without reloading the page(AJAX).

JavaScript does not:

Input and Output
Networking
Storage
Graphics

JavaScript can be used for

Server Side development (NodeJS)
Mobile development (PhoneGap, ReactNative, NativeScript)
Desktop development (Electron)
Robotics and so on ...

JavaScript Era

Timeline: Roughly 1996 – 2004

Problems: Basic DOM manipulation, User Interaction
Innovations: JavaScript itself
Dominant Browsers: Netscape Navigator, Microsoft Internet Explorer

The Early Era

Timeline: Roughly 2004 – 2010
Problems: Increased Site Complexity, Tons of Browsers to Support
Innovations: Robust DOM Manipulation, Early Single-Page Apps
Dominant Browsers: Microsoft IE, Mozilla Firefox

The jQuery Era

The Single Page App Era

Timeline: Roughly 2010 - 2014
Problems: AJAX Overload, Large-Scale Data Manipulation, Speed, Code Processing
Innovations: MVC-like frameworks, Bi-Directional Data Flow, DOM “Automagic”
Dominant Browsers: Google Chrome, Microsoft IE, Mozilla Firefox, Apple Safari

The Modern Era

Timeline: Roughly 2014 – Present
Problems: Speed, Increased App Complexity, Reliability, Mobile
Innovations: Virtual DOM, Single Direction Data Flow, Types, Testing
Dominant Browsers: Google Chrome, Apple Safari, Mozilla Firefox