Introduction
to
Front-End Engineering

Who am i and what do i do?


Devang Paliwal

UI Guy

Writing HTML CSS JAVASCRIPT

Engineering responsible for VIEW SOURCE

Why is it important?

20% - 80% rule (Server / Browser)

Who are frontend engineers?

Dictate browser what to do. Last line of defence for a company before a product is experienced by users.

Why are FE Guys important?

Intersection of design, strategy/company goals, backend

What are the challenges?

HTML, CSS, JS, BOM, DOM, Specs, implementations, platforms, browser modes, data formats, Browser bugs and many more.

Apart from this

Front End Technologies

evolves rapidly and keeping pace with the changes is itself a challenge.

Hacker
+
Developer
+
Engineer
=
Kickass Front End Guy

Front end Engineers

build web interfaces

which help users achieve their goals asap

Detour : How browsers work?

  • Request and Load HTML
  • Tokenize and parse html
  • Construct DOM Tree
  • Request other resources like images, stylesheets, scripts
  • Apply style info to the dom tree nodes
  • Generate Layout of the page
  • Paint

80% - 90% of the total

response time

is spent on the previous mentioned tasks

Minimize the time spent in the browser before the page is painted

HTTP

  • Protocol for exchanging req and response between client and server
  • Request methods : GET, POST, PUT, HEAD etc
  • GET request + If modified Since type
  • Keep Alive
  • Expiry
  • Accept-Encoding

How can we minimize the time taken in the browser before the page is rendered?

FEWER HTTP CALLS

Ex: too many images, use sprites, inline images, image maps

Expiry headers

Advantage of cacheing

GZIP

accept-encoding

CDN

bypass restriction of 2 connection per domain at a time

Scripts at bottom

Page rendering is not blocked

Link tag in head

Avoid FOUC + scripts asking for style info will get them

External CSS, JS files

Duplicate scripts

Thanks & Questions