SlideShare a Scribd company logo

Isomorphic javascript - Uppsala.js #8

A
Alexander Aivars

This document discusses building isomorphic JavaScript applications. It begins by explaining the benefits of isomorphic apps such as delivering the best experience to all users regardless of device or browser capabilities. It then describes how to build isomorphic apps using Node.js, a microservice architecture, and React for a unified coding experience. Finally, it highlights how isomorphic apps with React make development more productive and enjoyable by fixing the DOM issues and allowing developers to focus on what to build rather than how to build it.

Internet
1 of 66
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
isomorphic JavaScript
Alexander Aivars
Frontend developer
SVT
@alexaivars
 github.com/alexaivars
Agenda
Why build isomorphic apps
How to build isomorphic apps
How isomorphic with React makes developing fun
What is isomorphic JavaScript
Client + Server
API Server Browser Isomorphic Application Client plus Server MVC
BrowsersServerAPI JSON JSON HTML JS
BrowsersServerAPI JSON JSON HTML JS
BrowsersServerAPI JSON JSON HTML JS
SEO + Speed
Progressive enhancement
Progressive enhancement
Why build isomorphic apps
Deliver the best experience
Content to everyone
Content to everyone
You never know whats out there!
Growing amount of legacy
Key to reducing the effort
The server can use the same application code to render every page
Isomorphic javascript - Uppsala.js #8
“Isomorphic is the key to building javascript applications that work without JavaScript”
How we build isomorphic apps
node
node
Micro service architecture
Micro service architecture
React
React
How isomorphic and react makes developing fun.
Unified coding experience
React fixes the DOM
Concentrate on WHAT not HOW
Virtual DOM
Re-render
Easy to understand components
Components are just functions
Flux
ViewStoreDispatcher Action
Productive
Valuable
The stack
React
React Router
Fluxible
Superagent
Webpack
www.svt.se/nyheter www.svt.se/barnkanalen www.svt.se/barnkanalen/barnplay
Join the party
Management
The key to spending less💰supporting old browsers
Perceived page speed
SEO-friendly by default
Developers
Less 🐞
Fixes the DOM
New way to solve old problems
Our users
One more thing…
Isomorphic javascript is not about supporting browsers that don't have javascript but supporting users when javascript breaks

More Related Content

What's hot (19)

PPTX
React Native
Software Infrastructure
 
PDF
Serverless computing con Azure Functions
Hernan Guzman
 
PDF
Real World Progressive Web Apps (Building Flipkart Lite)
Abhinav Rastogi
 
PPTX
Latest Javascript MVC & Front End Frameworks 2017
AmarInfotech
 
PPTX
Analizzare le performance di un'applicazione ASP.NET con Glimpse
Emanuele Bartolesi
 
PPTX
Firebase.pptx
TanviBudhabaware
 
PPTX
Firebase.pptx
siddhiiAgarwal
 
PPTX
Single page application
Arthur Fung
 
PDF
Django Deployer
Colin Su
 
PPTX
Demand driven applications with om.next and react native
dvcrn
 
PPTX
The RAW stack
Maurice De Beijer [MVP]
 
PPTX
ASP.NET을 중심으로 한 웹 개발 기술의 발전과 마이크로소프트의 최근 동향
명신 김
 
PPTX
From zero to hero with Docker
Maurice De Beijer [MVP]
 
PDF
Progressive Web Apps. What, why and how
Riza Fahmi
 
PPTX
React Native - Unleash the power of React in your device - Eduard Tomàs - Cod...
Codemotion
 
PPTX
Building rest services using aspnetwebapi
Brij Mishra
 
PPTX
MEAN Stack
RoshanTak1
 
PDF
Frontend as a first class citizen
Marcin Grzywaczewski
 
PPTX
Single page application and Framework
Chandrasekar G
 
React Native
Software Infrastructure
 
Serverless computing con Azure Functions
Hernan Guzman
 
Real World Progressive Web Apps (Building Flipkart Lite)
Abhinav Rastogi
 
Latest Javascript MVC & Front End Frameworks 2017
AmarInfotech
 
Analizzare le performance di un'applicazione ASP.NET con Glimpse
Emanuele Bartolesi
 
Firebase.pptx
TanviBudhabaware
 
Firebase.pptx
siddhiiAgarwal
 
Single page application
Arthur Fung
 
Django Deployer
Colin Su
 
Demand driven applications with om.next and react native
dvcrn
 
The RAW stack
Maurice De Beijer [MVP]
 
ASP.NET을 중심으로 한 웹 개발 기술의 발전과 마이크로소프트의 최근 동향
명신 김
 
From zero to hero with Docker
Maurice De Beijer [MVP]
 
Progressive Web Apps. What, why and how
Riza Fahmi
 
React Native - Unleash the power of React in your device - Eduard Tomàs - Cod...
Codemotion
 
Building rest services using aspnetwebapi
Brij Mishra
 
MEAN Stack
RoshanTak1
 
Frontend as a first class citizen
Marcin Grzywaczewski
 
Single page application and Framework
Chandrasekar G
 

Viewers also liked (16)

PPTX
Med ped
cnreyno
 
DOCX
Resume_Sandip_Mohod_Java_9_plus_years_exp
Sandip Mohod
 
PDF
Dr. Chao top contributor - Risk Transfer is often used in place of Risk Sharing
Edward Chao
 
PDF
BSc Degree
Mohamed Maher
 
PPT
Scholarships power point
youthdiscovery
 
PPTX
Спартакиада - ГТО для компаниии
Kupola
 
DOC
Sara Stinson
Sara Fergusson
 
DOCX
Yader
milloslo
 
PPTX
Haiti Gonna Hate
mimivilmenay
 
DOCX
MY CV Updated - July 01, 2015
Ismail Khan
 
PDF
E-Brochure Noida World One (1)
saurabh manchanda
 
DOCX
RESUME OF SANDIP S GANGULY
SANDIP GANGULY
 
PPTX
500 de economia
Ing. Guillermo Colin Babio
 
PDF
2013 GEM Thailand Report
Ulrike Guelich
 
DOCX
Analysis of results media
millieiron
 
PPTX
Jonathan Mulosa ET'Al
JONATHAN MULOSA
 
Med ped
cnreyno
 
Resume_Sandip_Mohod_Java_9_plus_years_exp
Sandip Mohod
 
Dr. Chao top contributor - Risk Transfer is often used in place of Risk Sharing
Edward Chao
 
BSc Degree
Mohamed Maher
 
Scholarships power point
youthdiscovery
 
Спартакиада - ГТО для компаниии
Kupola
 
Sara Stinson
Sara Fergusson
 
Yader
milloslo
 
Haiti Gonna Hate
mimivilmenay
 
MY CV Updated - July 01, 2015
Ismail Khan
 
E-Brochure Noida World One (1)
saurabh manchanda
 
RESUME OF SANDIP S GANGULY
SANDIP GANGULY
 
500 de economia
Ing. Guillermo Colin Babio
 
2013 GEM Thailand Report
Ulrike Guelich
 
Analysis of results media
millieiron
 
Jonathan Mulosa ET'Al
JONATHAN MULOSA
 
Ad

Similar to Isomorphic javascript - Uppsala.js #8 (20)

PDF
Isomorphic web application
Oliver N
 
PDF
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
Spike Brehm
 
PDF
Isomorphic JavaScript: #DevBeat Master Class
Spike Brehm
 
PPTX
Isomorphic JavaScript – future of the web
Sigma Software
 
PDF
General Assembly Workshop: Advanced JavaScript
Spike Brehm
 
PDF
Isomorphic JavaScript with Nashorn
Maxime Najim
 
PPTX
Isomorphic apps
aditya rohilla
 
PDF
Isomorphic js - React in Rails
Shifa Khan
 
PDF
«The Grail: React based Isomorph apps framework»​
FDConf
 
PDF
The Grail: React based Isomorph apps framework
Eldar Djafarov
 
PDF
Kharkiv JS 2015 - Creating isomorphic applications in React (en)
Viktor Turskyi
 
PDF
Isomorphic Aplication with Javascript
Hengki Sihombing
 
PDF
"The Grail: React based Isomorph apps framework" Эльдар Джафаров
Fwdays
 
PDF
Isomorphic JS - new silver bullet
imevs
 
PPTX
Building isomorphic java script apps faster with next.js
Madhav Chaturvedi
 
PDF
Back to the future: Isomorphic javascript applications
Luciano Colosio
 
PDF
Javascript leverage: Isomorphic Applications by Luciano Colosio at Codemotion...
Codemotion Dubai
 
PDF
Isomorphic React + Flux at Yahoo
Itia Chang
 
PPT
Isomorphic Javascript - nodebr
David Lojudice Sobrinho
 
PDF
Performance and Scalability Art of Isomorphic React Applications
Denis Izmaylov
 
Isomorphic web application
Oliver N
 
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
Spike Brehm
 
Isomorphic JavaScript: #DevBeat Master Class
Spike Brehm
 
Isomorphic JavaScript – future of the web
Sigma Software
 
General Assembly Workshop: Advanced JavaScript
Spike Brehm
 
Isomorphic JavaScript with Nashorn
Maxime Najim
 
Isomorphic apps
aditya rohilla
 
Isomorphic js - React in Rails
Shifa Khan
 
«The Grail: React based Isomorph apps framework»​
FDConf
 
The Grail: React based Isomorph apps framework
Eldar Djafarov
 
Kharkiv JS 2015 - Creating isomorphic applications in React (en)
Viktor Turskyi
 
Isomorphic Aplication with Javascript
Hengki Sihombing
 
"The Grail: React based Isomorph apps framework" Эльдар Джафаров
Fwdays
 
Isomorphic JS - new silver bullet
imevs
 
Building isomorphic java script apps faster with next.js
Madhav Chaturvedi
 
Back to the future: Isomorphic javascript applications
Luciano Colosio
 
Javascript leverage: Isomorphic Applications by Luciano Colosio at Codemotion...
Codemotion Dubai
 
Isomorphic React + Flux at Yahoo
Itia Chang
 
Isomorphic Javascript - nodebr
David Lojudice Sobrinho
 
Performance and Scalability Art of Isomorphic React Applications
Denis Izmaylov
 
Ad

Recently uploaded (20)

PPT
introductio to computers by arthur janry
RamananMuthukrishnan
 
PPTX
Orchestrating things in Angular application
Peter Abraham
 
PDF
Azure_DevOps introduction for CI/CD and Agile
henrymails
 
PPTX
一比一原版(SUNY-Albany毕业证)纽约州立大学奥尔巴尼分校毕业证如何办理
Taqyea
 
PPTX
ONLINE BIRTH CERTIFICATE APPLICATION SYSYTEM PPT.pptx
ShyamasreeDutta
 
PPT
introduction to networking with basics coverage
RamananMuthukrishnan
 
PDF
AI_MOD_1.pdf artificial intelligence notes
shreyarrce
 
PPT
Computer Securityyyyyyyy - Chapter 1.ppt
SolomonSB
 
PPT
Computer Securityyyyyyyy - Chapter 2.ppt
SolomonSB
 
PDF
Apple_Environmental_Progress_Report_2025.pdf
yiukwong
 
PPT
Agilent Optoelectronic Solutions for Mobile Application
andreashenniger2
 
PPTX
sajflsajfljsdfljslfjslfsdfas;fdsfksadfjlsdflkjslgfs;lfjlsajfl;sajfasfd.pptx
theknightme
 
PPTX
L1A Season 1 ENGLISH made by A hegy fixed
toszolder91
 
PPTX
L1A Season 1 Guide made by A hegy Eng Grammar fixed
toszolder91
 
PPTX
04 Output 1 Instruments & Tools (3).pptx
GEDYIONGebre
 
PPTX
Lec15_Mutability Immutability-converted.pptx
khanjahanzaib1
 
PPTX
PE introd.pptxfrgfgfdgfdgfgrtretrt44t444
nepmithibai2024
 
PPTX
原版西班牙莱昂大学毕业证(León毕业证书)如何办理
Taqyea
 
PPTX
西班牙武康大学毕业证书{UCAMOfferUCAM成绩单水印}原版制作
Taqyea
 
PDF
Build Fast, Scale Faster: Milvus vs. Zilliz Cloud for Production-Ready AI
Zilliz
 
introductio to computers by arthur janry
RamananMuthukrishnan
 
Orchestrating things in Angular application
Peter Abraham
 
Azure_DevOps introduction for CI/CD and Agile
henrymails
 
一比一原版(SUNY-Albany毕业证)纽约州立大学奥尔巴尼分校毕业证如何办理
Taqyea
 
ONLINE BIRTH CERTIFICATE APPLICATION SYSYTEM PPT.pptx
ShyamasreeDutta
 
introduction to networking with basics coverage
RamananMuthukrishnan
 
AI_MOD_1.pdf artificial intelligence notes
shreyarrce
 
Computer Securityyyyyyyy - Chapter 1.ppt
SolomonSB
 
Computer Securityyyyyyyy - Chapter 2.ppt
SolomonSB
 
Apple_Environmental_Progress_Report_2025.pdf
yiukwong
 
Agilent Optoelectronic Solutions for Mobile Application
andreashenniger2
 
sajflsajfljsdfljslfjslfsdfas;fdsfksadfjlsdflkjslgfs;lfjlsajfl;sajfasfd.pptx
theknightme
 
L1A Season 1 ENGLISH made by A hegy fixed
toszolder91
 
L1A Season 1 Guide made by A hegy Eng Grammar fixed
toszolder91
 
04 Output 1 Instruments & Tools (3).pptx
GEDYIONGebre
 
Lec15_Mutability Immutability-converted.pptx
khanjahanzaib1
 
PE introd.pptxfrgfgfdgfdgfgrtretrt44t444
nepmithibai2024
 
原版西班牙莱昂大学毕业证(León毕业证书)如何办理
Taqyea
 
西班牙武康大学毕业证书{UCAMOfferUCAM成绩单水印}原版制作
Taqyea
 
Build Fast, Scale Faster: Milvus vs. Zilliz Cloud for Production-Ready AI
Zilliz
 

Isomorphic javascript - Uppsala.js #8