Isomorphic Applications Javascript

ABOUT ME

Hengki Sihombing Building Karejo.com - Organizer JakartaJS

twitter @hengkiardo

github @aredo

hengki@karejo.com

ISOMORPHIC JAVASCRIPT

Yes, fancy words

- but why should I care..?

SERVER-SIDE

Just ship it all from scratch every time

So easy!!

SERVER-SIDE

But poor user experience if you interact a lot

Traditional Web Framework

Gimme some dynamic web pages already!

NOT GOOD ENOUGH

• Pros: • Easy to reason about

• SEO out of the box

• Cons: • Every action is a refresh

• Poor user experience for dynamic apps

SERVER-SIDE

CLIENT-SIDE (SPA)

Look ma’ I can do all the things

without reloading now!

CLIENT-SIDE (SPA)

CLIENT-SIDE (SPA)

Don’t you dare press the back button

Modern Single Page Application

Modern Single Page Application

• Pros: • Actions without refresh the page

• Less redundancy, Better user experience

• Separate pure data from business logic

• Cons: • No content before the js loads / SEO

• Performance depend on users’ end devices

• Duplicate logic(URL routing, validation, ...etc.)

CLIENT-SIDE (SPA)

BUT I WANT IT ALL!

SERVER SIDE + SPA

Get all your stuff done!!

BUT

SERVER SIDE + SPA

Two separate codebase for the same application

Approaching..

ISOMORPHIC JAVASCRIPT

• A concept of JS web framework that shares Javascript run on both client side and server side.

• Reuse all codes Flexible for developer • Bootstrap initial page via server rendering • Font-end rendering/Back-end rendering

ISOMORPHIC

ISOMORPHIC JAVASCRIPT

ISOMORPHIC JAVASCRIPT

ISOMORPHIC JAVASCRIPT

ISOMORPHIC JAVASCRIPT

ISOMORPHIC JAVASCRIPT

How we can do it..??

So many options..

A library for creating user interfaces

https://facebook.github.io/react/

+

Let’s Demo OneThe Simplest isomorphic

Javascript app?

Redux

Flux Framework

meetup.com/JakartaJS

How to keep up to date on Javascript Technologies??

Thank you