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

Browser

Server

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

Rollup

Webpack

Beyond

Timeline: Roughly 2017 - and after
Problems: Speed, Mobile, Complex Solutions
Dominant Browsers: Google Chrome, Mozilla Firefox

Polymer

React and Infrastructure

Angular

Vanilla JS

Languages to JS

supersets

languages

Is JavaScript like Java

Yes, just like...

dog and hotdog

car and carpet

ham and hamster

Front-end candidates

  • Freelancers CMS / Small Projects / Experts
  • Layouters "Верстальщики"
  • jQuery stucked
  • I know only framework
  • Experts (Product, outsourcing)
Made with Slides.com