Web Development

Jaya Krishna Namburu

@askjkrishna

Past and Present

Motivation for the WEB !!

🤔

Good Old Days

📝

🎨

📦

JavaScript

CSS

HTML

example

Progressive Enhancement is Dead !!

Graceful Degradation

The Average Web Page Size Is More than 2MB !!

Present Day !!

📦

JavaScript

CSS-In-JS

Polyfills

📝

index.html

(Just for landing on the page)

📦

Templating Engines / JSX

In 2019, the dominant costs of processing scripts are now download and CPU execution time.

@addyosmani

FOU(C)(I)

FUBC

example-time 😄

example

Bundle Size

Initial bundle size*

Client - Request - Server - Resource - Client - Unzip - Execute - Paint

```
Initial load should be < 400 KB 
```

Dynamic loading, Lazy load parts of your application when needed.

Route level or component level code-splitting

```
G-Zip or brotli compression.
```
```
Differential Bundling
```

Send only the JS that is being used for the initial paint of the web-page.

Ok, now show me how does that work !!

Images

Jank !!

Here we are !!

```
 Library✅ 
```
```
Bundler✅ 
```
```
Transpiler / Compiler✅ 
```
```
Plugins for Bundler✅ 
```
```
Plugins for Transpiler✅ 
```
```
And one plugin for React with JSX✅
```
```
CSS-In Js-Library✅ 
```

Typescript /Flow for static type checking✅ Ployfills✅

```
Code Formatters✅ 
```
```
Linter✅ 
```

Ok!! State Management. (Adds Redux / ngRX / Vuex)✅

Ok!! Everyone is using service worker, let me add

How is our future going to be 🤔

Rome (experimental)

import-maps

Being a Responsible Developer !!

https://www.websitecarbon.com/

https://dannyvankooten.com/website-carbon-emissions/

Thank you :)