the state of frontend

30
THE STATE OF FRONTEND

Upload: jimit-shah

Post on 15-Apr-2017

417 views

Category:

Software


0 download

TRANSCRIPT

THE STATE OFFRONTEND

Jimit ShahWorking as a freelance Developer in Python, UI Development, Hybrid

App

• Love building startups• Always exploring new technologies• Wannabe open source contributor and Mobile Dev• In my free time, I work on electronics, gardening

and reading

@jimitnow codeforfood.in

THE PAST THE PRESENT THE FUTURE

© https://worldviewofjesus.files.wordpress.com

JQUERY ERA SPA ERA Magic

THE PAST

Once upon a time

STACK

• jQuery• Pure CSS• Pure HTML• No Build Tool

Some notable achievements

• We finally have jQuery (Simpler way to manipulate DOM)

• Browser vendor got united through W3C standard

• AJAX started picking pace

• We began to feel limitation of Pure CSS

• Responsive design started becoming main stream

Problem faced

• No minification (or) concatenation

• Non-performant code

• Unmanageable code

• Lots of hacks

THE PAST MAY HURT, BUT YOU CAN EITHER RUN FROM IT (OR) LEARN FROM IT

THE PRESENT

We (finally) have

JS Frameworks

Build ToolsMagical Tools 😜

🤓

JS Everywhere

CSS Frameworks

Death of IE 😎

JS FrameworksA lot of it15+ Well maintained Frameworks

It’s all happening because

Benefits that framework offers

• Coherent way of coding

• Manageable and scalable code

• Built in best practices

• Component structure

• Quick turn around time

disadvantages

CSS Framework

Million more………

Benefits• Grid Layout

• Mobile First Design

• Drag and Drop design

• Built in Best Practices

• Large Community

Build Tool

AdvantagesMinification

ConcatenationModularity

Keeps growing……….

Magical Tools

Hybrid Mobile App

IOT & Hardware Virtual Reality

The Future

Five trends for 2016

1. Battle of framework

Five trends for 2016

2. ES6 becomes mainstream

Promises

Module Loader Modules

Arrow Functions

Classes Fetch

Default + Rest + Spread

Native Transpiling

Five trends for 2016

3. Service WorkerTL;DR

A service worker is a script that is run by your browser in the background, separate from a web page, opening the

door to features which don't need a web page or user interaction.

Ex. Push Notification in Chrome

Offline Web Apps

Background Sync

Extreme level of caching

Five trends for 2016 4. Web Components

Example

<video src=“http://youtube.com/catvideo”>

</video>

Polymer

Five trends for 2016

5. Material Design Everywhere

React Native Material

Thank YouAll in all, we will be progressing faster than ever before.

Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work.And the only way to do great work is to love what you do. If you haven’t

found it yet, keep looking. Don’t settle. As with all matters of the heart, you’ll know when you find it.

-- Steve Jobs