Web: JavaScript, Front-end, Backend and more 

$ whoami

Senior Software Engineer

> about 6 years with GlobalLogic

> more than 7 years in Web Development

> Trusted Interviewer (Web)

> speaker and mentor at GlobalLogic JS community

> speaker and part of the program committee at JavaScript Fwdays

Inna Ivashchuk

Introduction

General description of technology & its usage

Web development is the work involved in developing a Web site for the Internet (World Wide Web) or an intranet (a private network).

Web technologies

Let me introduce the 3 main technologies that are used to build a website HTML, CSS, and JavaScript

HTML: website structure

The HyperText Markup Language, or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. 

CSS: website style and colors

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.

JavaScript: website functionality

JavaScript often abbreviated as JS, is a programming language that conforms to the ECMAScript specification.  JS is lightweight, interpreted, or just-in-time compiled programming language with first-class functions.

HTML

CSS

JavaScript

JavaScript applications

Websites

Web Applications

Presentations

Server applications

IoT

Games

Art

Smartwatch Apps

Mobile Apps

Flying Robots

Examples

Interesting examples

JS Interactive Art

https://www.sbs.com.au/theboat/

Front-End vs Backend vs Fullstack JS engineer

Technology stack requirements and expectations for various seniority level

Front-End vs Backend

Front-end:

• appearance (style, color)
• controls (handlebar, gearbox)
• wheels
• sparks
• etc

Backend:

• engine
• starter motor
• radiator
• ignition
• etc

Client (Front-end)

Server (Backend)

"Hey, server, let's talk?"

How client communicates with server: visual representation

I'm a Front-end engineer and I like to create beautiful web apps with amazing design, animations and some business logic as well

Dinesh

I'm a JS Backend engineer and I like to write server code. And of course, my server has a name - 

Gilfoyle

ANTON

I'm a JS Fullstack engineer and I like to write server code and client (UI) code as well and even know a bit about DevOps

Gilfoyle

Dinesh

Richard

Front-end

Fullstack

Backend

The most popular Front-end libs and frameworks

The most popular Backend frameworks

Front-end

Backend

Playwright

QA Automation

Recruitment screening

What to assess at this stage?

What to check

Now let’s talk about the best practices for prescreening candidates:  

☐ Ask delivery leaders for a personal presentation of the project/vacancy 

☐ Understand the role of a project in simple words:

     Why is it needed, what are the inputs/outcomes, and what functional benefits, so you may efficiently engage the candidates according to their skills

☐ Collaborate with your Trusted interviewers who support you in the technical interview

☐ Check English level

      Ask some general questions related to experience or even easy technical questions

Easy technical questions

• Is JavaScript a synchronous or an asynchronous programming language? 

Correct answer: synchronous or synchronous with asynchronous ability

• Name 3 principles of object-oriented programming

Correct answer: Inheritance, Encapsulation and Polymorphism

More questions can be provided by Technical Interviewer

Profiles showcase

Resume checks

Common recruiter's mistakes

• Wrong technologies stack. A project looking forward for a React developer, but a Node.js developer suggested with no experience in React.

• React developer for React Native position

• English level is not checked. Please ask some basic questions in English to be sure a candidate has the required level.

• Keep an eye on the main technology at the last project. If a vacancy requires knowledge of Angular, but a candidate has used this framework about 4 years ago - it’s a bad sign.

•  Java engineer profiles are suggested for JavaScript positions

Mistakes

Why I've chosen Front-end

My Front-end journey has been started when I've created the first web site for my school 

Front-end is a combination of Designer and Programmer skills

Learning path

Front-end path

Front-end dev skills

must-have tech skills

Backend path

Backend dev skills

must-have tech skills

Nice-to-Have Tech Skills

How a web app communicates with a server

HTTP and WebSocket

      Hypertext Transfer Protocol (HTTP) is an application-layer protocol for transmitting hypermedia documents, such as HTML. It was designed for communication between web browsers and web servers, but it can also be used for other purposes. HTTP follows a classical client-server model, with a client opening a connection to make a request, then waiting until it receives a response. HTTP is a stateless protocol, meaning that the server does not keep any data (state) between two requests.

      WebSocket is a computer communications protocol, providing full-duplex communication channels over a single TCP connection. The WebSocket protocol was standardized by the IETF as RFC 6455 in 2011. The current API specification allowing web applications to use this protocol is known as WebSockets

Client 2

Server

Client 3

Client 1

Client 4

WebSocket and chats

WebSocket in TCP/IP protocol stack

WS

HTTP

DNS

FTP

TCP

UDP

IP

ICMP

ARP

DHCP

Ethernet

Wi-Fi

DSL

Application

Transport

Network

Data Link and Physical

Collect the data from the application software and format it for further processing

Packetize the data. Add sequecing and error correction info to each packet

Add source and destination IP address to each packet

Add source and destination MAC address to each packet and pass to NIC drivers

Client

Server

"Hey, server, let's talk WebSocket?"

"Okay!"

Handshake (HTTP upgrade)

Bi-directional messages

WebSocket: visual representation

HTTP in TCP/IP protocol stack

WS

DNS

FTP

TCP

UDP

IP

ICMP

ARP

DHCP

Ethernet

Wi-Fi

DSL

Application

Transport

Network

Data Link and Physical

Collect the data from the application software and format it for further processing

Packetize the data. Add sequecing and error correction info to each packet

Add source and destination IP address to each packet

Add source and destination MAC address to each packet and pass to NIC drivers

HTTP

Client

Server

"Hey, server, let's talk?"

HTTP: visual representation

REST API*

      A REST API (also known as RESTful API) is an application programming interface (API or web API) that conforms to the constraints of REST architectural style and allows for interaction with RESTful web services. REST stands for representational state transfer and was created by computer scientist Roy Fielding.

*API - application programming interface

REST API criteria

• A uniform interface between components so that information is transferred in a standard form

• A layered system that organizes each type of server (those responsible for security, load-balancing, etc.) involved the retrieval of requested information into hierarchies, invisible to the client.

• Code-on-demand (optional): the ability to send executable code from the server to the client when requested, extending client functionality. 

https://inna-git-cat.surge.sh