SlideShare a Scribd company logo
Israel Shirk
Right now: Mad scientist, Ultra Runner, Backcountry
Skier, Performance Architect @ Scentsy (starting
Monday), CTO @ Zerrtech, and a bunch of other stuff
Ok, it’s really “New approaches to hypertext and REST in
a mobile-first world
Old internet: Homogeneity (except you-know-who)
New internet:
Shimmable homogeneity on the browser
Tablets!
Phones!
Desktop Applications!
Web Applications!
Embedded Devices!
Background:
What is “hypertext”?
Background:
What is “hypertext”?
Google:
“A software system that links topics on the screen to related
information and graphics, which are typically accessed by a
point-and-click method”
Background:
What is “REST”?
Background:
What is “REST”?
Martin Fowler:
Level 0 to Level 4
it: https://martinfowler.com/articles/richardsonMaturityModel.html
POX: Plain Old Xml (or JSON)
(Yeah, I’m saying your REST API ain’t REST)
Skip a few: Rest Level 3
Hypermedia Controls
Skip a few: Rest Level 3
Hypermedia Controls
(HATEOAS)
HATEOAS:
I hate operating systems?
HATEOAS:
Hypertext As The Engine Of Application State
Great example: HTML w/o JS.
New world order:
HTML does not always translate across devices
the way we want it to!
(dangit)
Solutions?
REST L4 in other forms,
interpreted on device
(like… a compat layer in-browser,
NativeScript, Electron, React Native, …)
Solution I’m using right now?
JSON Hyperschema (with nonstandard extensions)
Alternatives?
VND is most popular, others are out there but rarer
Why JSON Hyperschema?
It’s made for this problem: self-describing APIs
and objects.
Example:
{
"$schema": “http://json-schema.org/schema#",
“type”: “person”,
“X-name”: “Israel”,
“links”: [
{
“rel”: “profile”,
“href”: “https://www.facebook.com/israelshirk"
},
{
“rel”: “hubgit”
“href": “https://github.com/israelshirk"
}
]
}
Declare as JSON schema:
{
"$schema": “http://json-schema.org/schema#",
“type”: “person”,
“X-name”: “Israel”,
“links”: [
{
“rel”: “profile”,
“href”: “https://www.facebook.com/israelshirk"
},
{
“rel”: “hubgit”
“href": “https://github.com/israelshirk"
}
]
}
Define type of object
(technically the RFC doesn’t allow this but…
Open source to the rescue!)
{
"$schema": “http://json-schema.org/schema#",
“type”: “person”,
“X-name”: “Israel”,
“links”: [
{
“rel”: “profile”,
“href”: “https://www.facebook.com/israelshirk"
},
{
“rel”: “hubgit”
“href": “https://github.com/israelshirk"
}
]
}
Custom extensions start with X- to be mostly in-line with standard
{
"$schema": “http://json-schema.org/schema#",
“type”: “person”,
“X-name”: “Israel”,
“links”: [
{
“rel”: “profile”,
“href”: “https://www.facebook.com/israelshirk"
},
{
“rel”: “hubgit”
“href": “https://github.com/israelshirk"
}
]
}
Links to indicate paths that can be followed
{
"$schema": “http://json-schema.org/schema#",
“type”: “person”,
“X-name”: “Israel”,
“links”: [
{
“rel”: “profile”,
“href”: “https://www.facebook.com/israelshirk"
},
{
“rel”: “hubgit”
“href": “https://github.com/israelshirk"
}
]
}
http://json-schema.org/latest/json-schema-hypermedia.html#rfc.section.5
We can then start doing really fancy stuff:
{
"$schema": “http://json-schema.org/schema#",
“type”: “person”,
“X-name”: “Israel”,
“X-profile-name”: “israelshirk”,
“X-Friends”: { “$ref”: “/{profile}/friendlist” },
“links”: [
{
“rel”: “profile”,
“href”: “https://www.facebook.com/{profile}"
},
{
“rel”: “hubgit”,
“href": “https://github.com/{profile}"
},
{
“rel”: “save”,
“href”: “/{profile}”
}
]
}
Critical factors:
Easy-to-use interpreters.
Check out:
Mozilla’s React-Jsonschema-Form (I’m a rabble-rouser there)
Angular-Schema-Form (schemaform.io - just a bug fixer here)
JS lib for JSON hyper schema validation. I have a fork…. Somew
Then: Custom components for your object types!
Webcomponents are essential here.
eact-Jsonschema-Form: https://github.com/mozilla-services/react-
function PageLayout(props) {
const {children, schema} = props;
return (
<div class=“root”>
<!— This is the root page element. Children of the schema go into children below! —>
{children}
</div>
);
}
render((
<Form schema={schema}
fields={ { “page-layout”: PageLayout } } />,
), document.getElementById("app"));
eact-Jsonschema-Form: https://github.com/mozilla-services/react-
function PageLayout(props) {
const {children, schema} = props;
return (
<div class=“root”>
<!— This is the root page element. Children of the schema go into children below! —>
<div className=“col-xs-12”> <Form schema={schema[‘X-header’]} fields={fields} >
</div>
);
}
let fields = { PageLayout: PageLayout }
render((
<Form schema={schema}
fields={ fields } />,
), document.getElementById("app"));
u can do things like this, and each client will have an appropriate r
laid out differently by device type - but all from the same backend
{
“type”: “page-layout”,
“properties”: {
“header”: {
“type”: “array”,
“items”: [
{ “type”: “header-item”, “title”: “Click me!”, “links”:
[{ “link”: “/clickme” }]
}
],
},
“body”: {
“type”: “person”,
…
}
}
}
End result?
Data-centric wonderfulness server-side,
render-centric focus client-side!
Next steps?
Integration into nginx+lua+memcache for ref resolution,
like Varnish/Akamai for ESI
Add more gif (spoken as spelled)
Public code samples

More Related Content

What's hot

Dangerous Google searching for secrets
Dangerous Google searching for secretsDangerous Google searching for secrets
Dangerous Google searching for secrets
Pim Piepers
 
Experiments in Data Portability 2
Experiments in Data Portability 2Experiments in Data Portability 2
Experiments in Data Portability 2
Glenn Jones
 
Scraping with Python for Fun and Profit - PyCon India 2010
Scraping with Python for Fun and Profit - PyCon India 2010Scraping with Python for Fun and Profit - PyCon India 2010
Scraping with Python for Fun and Profit - PyCon India 2010
Abhishek Mishra
 
Setup testdata
Setup testdataSetup testdata
Setup testdata
Poya Manouchehri
 
Social media recruitment
Social media recruitmentSocial media recruitment
Social media recruitment
Jatiraj N
 
Linked Data and Tools
Linked Data and ToolsLinked Data and Tools
Linked Data and Tools
Pedro Szekely
 
Google Hacking 101
Google Hacking 101Google Hacking 101
Google Hacking 101
Sais Abdelkrim
 
Creating Linked Data 2/5 Semtech2011
Creating Linked Data 2/5 Semtech2011Creating Linked Data 2/5 Semtech2011
Creating Linked Data 2/5 Semtech2011
Juan Sequeda
 
BrightonSEO
BrightonSEOBrightonSEO
BrightonSEO
Richard Falconer
 
Bollean Search - NageshRao
Bollean Search - NageshRaoBollean Search - NageshRao
Bollean Search - NageshRao
Nagesh Rao is Hiring Testing People at AUS
 
SMX Advanced 2018 Solving Complex SEO Problems by Patrick Stox
SMX Advanced 2018 Solving Complex SEO Problems by Patrick StoxSMX Advanced 2018 Solving Complex SEO Problems by Patrick Stox
SMX Advanced 2018 Solving Complex SEO Problems by Patrick Stox
patrickstox
 

What's hot (11)

Dangerous Google searching for secrets
Dangerous Google searching for secretsDangerous Google searching for secrets
Dangerous Google searching for secrets
 
Experiments in Data Portability 2
Experiments in Data Portability 2Experiments in Data Portability 2
Experiments in Data Portability 2
 
Scraping with Python for Fun and Profit - PyCon India 2010
Scraping with Python for Fun and Profit - PyCon India 2010Scraping with Python for Fun and Profit - PyCon India 2010
Scraping with Python for Fun and Profit - PyCon India 2010
 
Setup testdata
Setup testdataSetup testdata
Setup testdata
 
Social media recruitment
Social media recruitmentSocial media recruitment
Social media recruitment
 
Linked Data and Tools
Linked Data and ToolsLinked Data and Tools
Linked Data and Tools
 
Google Hacking 101
Google Hacking 101Google Hacking 101
Google Hacking 101
 
Creating Linked Data 2/5 Semtech2011
Creating Linked Data 2/5 Semtech2011Creating Linked Data 2/5 Semtech2011
Creating Linked Data 2/5 Semtech2011
 
BrightonSEO
BrightonSEOBrightonSEO
BrightonSEO
 
Bollean Search - NageshRao
Bollean Search - NageshRaoBollean Search - NageshRao
Bollean Search - NageshRao
 
SMX Advanced 2018 Solving Complex SEO Problems by Patrick Stox
SMX Advanced 2018 Solving Complex SEO Problems by Patrick StoxSMX Advanced 2018 Solving Complex SEO Problems by Patrick Stox
SMX Advanced 2018 Solving Complex SEO Problems by Patrick Stox
 

Viewers also liked

El monasterio suspendido
El monasterio suspendidoEl monasterio suspendido
El monasterio suspendido
capri_6969
 
It only took 15 years 9 months and 26 day summary version05
It only took 15 years 9 months and 26 day summary version05It only took 15 years 9 months and 26 day summary version05
It only took 15 years 9 months and 26 day summary version05
Hiroshi Okada
 
Barbato, manfredini, tacchini werner
Barbato, manfredini, tacchini wernerBarbato, manfredini, tacchini werner
Barbato, manfredini, tacchini werner
aletacc
 
แบบกรอกข้อมูลเกณฑ์ชี้วัดมาตรฐานบริการสาธารณะ สำหรับองค์การบริหารส่วนตำบล
แบบกรอกข้อมูลเกณฑ์ชี้วัดมาตรฐานบริการสาธารณะ สำหรับองค์การบริหารส่วนตำบลแบบกรอกข้อมูลเกณฑ์ชี้วัดมาตรฐานบริการสาธารณะ สำหรับองค์การบริหารส่วนตำบล
แบบกรอกข้อมูลเกณฑ์ชี้วัดมาตรฐานบริการสาธารณะ สำหรับองค์การบริหารส่วนตำบล
ประพันธ์ เวารัมย์
 
แนวข้อสอบการวางแผน แผนงาน โครงการ การบริหาร
แนวข้อสอบการวางแผน  แผนงาน โครงการ การบริหารแนวข้อสอบการวางแผน  แผนงาน โครงการ การบริหาร
แนวข้อสอบการวางแผน แผนงาน โครงการ การบริหาร
ประพันธ์ เวารัมย์
 
Sad project 1
Sad project 1Sad project 1
Sad project 1
Rakibul Islam
 
06 tvu sta301_bai4_v1.00131012140
06 tvu sta301_bai4_v1.0013101214006 tvu sta301_bai4_v1.00131012140
06 tvu sta301_bai4_v1.00131012140
Yen Dang
 

Viewers also liked (7)

El monasterio suspendido
El monasterio suspendidoEl monasterio suspendido
El monasterio suspendido
 
It only took 15 years 9 months and 26 day summary version05
It only took 15 years 9 months and 26 day summary version05It only took 15 years 9 months and 26 day summary version05
It only took 15 years 9 months and 26 day summary version05
 
Barbato, manfredini, tacchini werner
Barbato, manfredini, tacchini wernerBarbato, manfredini, tacchini werner
Barbato, manfredini, tacchini werner
 
แบบกรอกข้อมูลเกณฑ์ชี้วัดมาตรฐานบริการสาธารณะ สำหรับองค์การบริหารส่วนตำบล
แบบกรอกข้อมูลเกณฑ์ชี้วัดมาตรฐานบริการสาธารณะ สำหรับองค์การบริหารส่วนตำบลแบบกรอกข้อมูลเกณฑ์ชี้วัดมาตรฐานบริการสาธารณะ สำหรับองค์การบริหารส่วนตำบล
แบบกรอกข้อมูลเกณฑ์ชี้วัดมาตรฐานบริการสาธารณะ สำหรับองค์การบริหารส่วนตำบล
 
แนวข้อสอบการวางแผน แผนงาน โครงการ การบริหาร
แนวข้อสอบการวางแผน  แผนงาน โครงการ การบริหารแนวข้อสอบการวางแผน  แผนงาน โครงการ การบริหาร
แนวข้อสอบการวางแผน แผนงาน โครงการ การบริหาร
 
Sad project 1
Sad project 1Sad project 1
Sad project 1
 
06 tvu sta301_bai4_v1.00131012140
06 tvu sta301_bai4_v1.0013101214006 tvu sta301_bai4_v1.00131012140
06 tvu sta301_bai4_v1.00131012140
 

Similar to New approaches to hypertext and REST in a mobile-first world

Building Next-Generation Web APIs with JSON-LD and Hydra
Building Next-Generation Web APIs with JSON-LD and HydraBuilding Next-Generation Web APIs with JSON-LD and Hydra
Building Next-Generation Web APIs with JSON-LD and Hydra
Markus Lanthaler
 
Mashups in the Information Technology Classroom
Mashups in the Information Technology ClassroomMashups in the Information Technology Classroom
Mashups in the Information Technology Classroom
Mark Frydenberg
 
JSON REST API for WordPress
JSON REST API for WordPressJSON REST API for WordPress
JSON REST API for WordPress
Taylor Lovett
 
Designing a beautiful REST json api
Designing a beautiful REST json apiDesigning a beautiful REST json api
Designing a beautiful REST json api
0x07de
 
Rust: Systems Programming for Everyone
Rust: Systems Programming for EveryoneRust: Systems Programming for Everyone
Rust: Systems Programming for Everyone
C4Media
 
YQL: Select * from Internet
YQL: Select * from InternetYQL: Select * from Internet
YQL: Select * from Internet
drgath
 
FIWARE Training: JSON-LD and NGSI-LD
FIWARE Training: JSON-LD and NGSI-LDFIWARE Training: JSON-LD and NGSI-LD
FIWARE Training: JSON-LD and NGSI-LD
FIWARE
 
OrientDB introduction - NoSQL
OrientDB introduction - NoSQLOrientDB introduction - NoSQL
OrientDB introduction - NoSQL
Luca Garulli
 
Guillotina: The Asyncio REST Resource API
Guillotina: The Asyncio REST Resource APIGuillotina: The Asyncio REST Resource API
Guillotina: The Asyncio REST Resource API
Nathan Van Gheem
 
Social Graphs and Semantic Analytics
Social Graphs and Semantic AnalyticsSocial Graphs and Semantic Analytics
Social Graphs and Semantic Analytics
Colin Bell
 
Finding things on the web with BOSS
Finding things on the web with BOSSFinding things on the web with BOSS
Finding things on the web with BOSS
Christian Heilmann
 
REST with Eve and Python
REST with Eve and PythonREST with Eve and Python
REST with Eve and Python
PiXeL16
 
Big Data Web applications for Interactive Hadoop by ENRICO BERTI at Big Data...
 Big Data Web applications for Interactive Hadoop by ENRICO BERTI at Big Data... Big Data Web applications for Interactive Hadoop by ENRICO BERTI at Big Data...
Big Data Web applications for Interactive Hadoop by ENRICO BERTI at Big Data...
Big Data Spain
 
JSON REST API for WordPress
JSON REST API for WordPressJSON REST API for WordPress
JSON REST API for WordPress
Taylor Lovett
 
Tapping into Scientific Data with Hadoop and Flink
Tapping into Scientific Data with Hadoop and FlinkTapping into Scientific Data with Hadoop and Flink
Tapping into Scientific Data with Hadoop and Flink
Michael Häusler
 
State of the Semantic Web
State of the Semantic WebState of the Semantic Web
State of the Semantic Web
Ivan Herman
 
Linked opendata parisemantique.fr - 24062011
Linked opendata   parisemantique.fr - 24062011Linked opendata   parisemantique.fr - 24062011
Linked opendata parisemantique.fr - 24062011
Loïc Dias Da Silva
 
Designing RESTful APIs
Designing RESTful APIsDesigning RESTful APIs
Designing RESTful APIs
anandology
 
Dev sum - Beyond REST with GraphQL in .Net
Dev sum - Beyond REST with GraphQL in .NetDev sum - Beyond REST with GraphQL in .Net
Dev sum - Beyond REST with GraphQL in .Net
Irina Scurtu
 
OSCON 2011 CouchApps
OSCON 2011 CouchAppsOSCON 2011 CouchApps
OSCON 2011 CouchApps
Bradley Holt
 

Similar to New approaches to hypertext and REST in a mobile-first world (20)

Building Next-Generation Web APIs with JSON-LD and Hydra
Building Next-Generation Web APIs with JSON-LD and HydraBuilding Next-Generation Web APIs with JSON-LD and Hydra
Building Next-Generation Web APIs with JSON-LD and Hydra
 
Mashups in the Information Technology Classroom
Mashups in the Information Technology ClassroomMashups in the Information Technology Classroom
Mashups in the Information Technology Classroom
 
JSON REST API for WordPress
JSON REST API for WordPressJSON REST API for WordPress
JSON REST API for WordPress
 
Designing a beautiful REST json api
Designing a beautiful REST json apiDesigning a beautiful REST json api
Designing a beautiful REST json api
 
Rust: Systems Programming for Everyone
Rust: Systems Programming for EveryoneRust: Systems Programming for Everyone
Rust: Systems Programming for Everyone
 
YQL: Select * from Internet
YQL: Select * from InternetYQL: Select * from Internet
YQL: Select * from Internet
 
FIWARE Training: JSON-LD and NGSI-LD
FIWARE Training: JSON-LD and NGSI-LDFIWARE Training: JSON-LD and NGSI-LD
FIWARE Training: JSON-LD and NGSI-LD
 
OrientDB introduction - NoSQL
OrientDB introduction - NoSQLOrientDB introduction - NoSQL
OrientDB introduction - NoSQL
 
Guillotina: The Asyncio REST Resource API
Guillotina: The Asyncio REST Resource APIGuillotina: The Asyncio REST Resource API
Guillotina: The Asyncio REST Resource API
 
Social Graphs and Semantic Analytics
Social Graphs and Semantic AnalyticsSocial Graphs and Semantic Analytics
Social Graphs and Semantic Analytics
 
Finding things on the web with BOSS
Finding things on the web with BOSSFinding things on the web with BOSS
Finding things on the web with BOSS
 
REST with Eve and Python
REST with Eve and PythonREST with Eve and Python
REST with Eve and Python
 
Big Data Web applications for Interactive Hadoop by ENRICO BERTI at Big Data...
 Big Data Web applications for Interactive Hadoop by ENRICO BERTI at Big Data... Big Data Web applications for Interactive Hadoop by ENRICO BERTI at Big Data...
Big Data Web applications for Interactive Hadoop by ENRICO BERTI at Big Data...
 
JSON REST API for WordPress
JSON REST API for WordPressJSON REST API for WordPress
JSON REST API for WordPress
 
Tapping into Scientific Data with Hadoop and Flink
Tapping into Scientific Data with Hadoop and FlinkTapping into Scientific Data with Hadoop and Flink
Tapping into Scientific Data with Hadoop and Flink
 
State of the Semantic Web
State of the Semantic WebState of the Semantic Web
State of the Semantic Web
 
Linked opendata parisemantique.fr - 24062011
Linked opendata   parisemantique.fr - 24062011Linked opendata   parisemantique.fr - 24062011
Linked opendata parisemantique.fr - 24062011
 
Designing RESTful APIs
Designing RESTful APIsDesigning RESTful APIs
Designing RESTful APIs
 
Dev sum - Beyond REST with GraphQL in .Net
Dev sum - Beyond REST with GraphQL in .NetDev sum - Beyond REST with GraphQL in .Net
Dev sum - Beyond REST with GraphQL in .Net
 
OSCON 2011 CouchApps
OSCON 2011 CouchAppsOSCON 2011 CouchApps
OSCON 2011 CouchApps
 

Recently uploaded

Assignment 1 (Introductions to Microsoft Power point 2019) kiran.pptx
Assignment 1 (Introductions to Microsoft Power point 2019) kiran.pptxAssignment 1 (Introductions to Microsoft Power point 2019) kiran.pptx
Assignment 1 (Introductions to Microsoft Power point 2019) kiran.pptx
kirannaveed6
 
Aggression - Applied Social Psychology - Psychology SuperNotes
Aggression - Applied Social Psychology - Psychology SuperNotesAggression - Applied Social Psychology - Psychology SuperNotes
Aggression - Applied Social Psychology - Psychology SuperNotes
PsychoTech Services
 
ProSocial Behaviour - Applied Social Psychology - Psychology SuperNotes
ProSocial Behaviour - Applied Social Psychology - Psychology SuperNotesProSocial Behaviour - Applied Social Psychology - Psychology SuperNotes
ProSocial Behaviour - Applied Social Psychology - Psychology SuperNotes
PsychoTech Services
 
1-CIE-IGCSE-Additional-Mathematics-Topical-Past-Paper-Functions.pdf
1-CIE-IGCSE-Additional-Mathematics-Topical-Past-Paper-Functions.pdf1-CIE-IGCSE-Additional-Mathematics-Topical-Past-Paper-Functions.pdf
1-CIE-IGCSE-Additional-Mathematics-Topical-Past-Paper-Functions.pdf
shahul62
 
The Six Working Genius Short Explanation
The Six Working Genius Short ExplanationThe Six Working Genius Short Explanation
The Six Working Genius Short Explanation
abijabar2
 
healthy relationships and building a friendship
healthy relationships and building a friendshiphealthy relationships and building a friendship
healthy relationships and building a friendship
HaydarbekYuldoshev1
 
The Secret Warrior - Help Share a Parent or Loved Ones’ Cancer Diagnosis with...
The Secret Warrior - Help Share a Parent or Loved Ones’ Cancer Diagnosis with...The Secret Warrior - Help Share a Parent or Loved Ones’ Cancer Diagnosis with...
The Secret Warrior - Help Share a Parent or Loved Ones’ Cancer Diagnosis with...
CANSA The Cancer Association of South Africa
 
7 Habits of Highly Effective People.pptx
7 Habits of Highly Effective People.pptx7 Habits of Highly Effective People.pptx
7 Habits of Highly Effective People.pptx
gpangilinan2017
 
Understanding of Self - Applied Social Psychology - Psychology SuperNotes
Understanding of Self - Applied Social Psychology - Psychology SuperNotesUnderstanding of Self - Applied Social Psychology - Psychology SuperNotes
Understanding of Self - Applied Social Psychology - Psychology SuperNotes
PsychoTech Services
 

Recently uploaded (9)

Assignment 1 (Introductions to Microsoft Power point 2019) kiran.pptx
Assignment 1 (Introductions to Microsoft Power point 2019) kiran.pptxAssignment 1 (Introductions to Microsoft Power point 2019) kiran.pptx
Assignment 1 (Introductions to Microsoft Power point 2019) kiran.pptx
 
Aggression - Applied Social Psychology - Psychology SuperNotes
Aggression - Applied Social Psychology - Psychology SuperNotesAggression - Applied Social Psychology - Psychology SuperNotes
Aggression - Applied Social Psychology - Psychology SuperNotes
 
ProSocial Behaviour - Applied Social Psychology - Psychology SuperNotes
ProSocial Behaviour - Applied Social Psychology - Psychology SuperNotesProSocial Behaviour - Applied Social Psychology - Psychology SuperNotes
ProSocial Behaviour - Applied Social Psychology - Psychology SuperNotes
 
1-CIE-IGCSE-Additional-Mathematics-Topical-Past-Paper-Functions.pdf
1-CIE-IGCSE-Additional-Mathematics-Topical-Past-Paper-Functions.pdf1-CIE-IGCSE-Additional-Mathematics-Topical-Past-Paper-Functions.pdf
1-CIE-IGCSE-Additional-Mathematics-Topical-Past-Paper-Functions.pdf
 
The Six Working Genius Short Explanation
The Six Working Genius Short ExplanationThe Six Working Genius Short Explanation
The Six Working Genius Short Explanation
 
healthy relationships and building a friendship
healthy relationships and building a friendshiphealthy relationships and building a friendship
healthy relationships and building a friendship
 
The Secret Warrior - Help Share a Parent or Loved Ones’ Cancer Diagnosis with...
The Secret Warrior - Help Share a Parent or Loved Ones’ Cancer Diagnosis with...The Secret Warrior - Help Share a Parent or Loved Ones’ Cancer Diagnosis with...
The Secret Warrior - Help Share a Parent or Loved Ones’ Cancer Diagnosis with...
 
7 Habits of Highly Effective People.pptx
7 Habits of Highly Effective People.pptx7 Habits of Highly Effective People.pptx
7 Habits of Highly Effective People.pptx
 
Understanding of Self - Applied Social Psychology - Psychology SuperNotes
Understanding of Self - Applied Social Psychology - Psychology SuperNotesUnderstanding of Self - Applied Social Psychology - Psychology SuperNotes
Understanding of Self - Applied Social Psychology - Psychology SuperNotes
 

New approaches to hypertext and REST in a mobile-first world

  • 1. Israel Shirk Right now: Mad scientist, Ultra Runner, Backcountry Skier, Performance Architect @ Scentsy (starting Monday), CTO @ Zerrtech, and a bunch of other stuff
  • 2. Ok, it’s really “New approaches to hypertext and REST in a mobile-first world
  • 3. Old internet: Homogeneity (except you-know-who)
  • 4. New internet: Shimmable homogeneity on the browser Tablets! Phones! Desktop Applications! Web Applications! Embedded Devices!
  • 6. Background: What is “hypertext”? Google: “A software system that links topics on the screen to related information and graphics, which are typically accessed by a point-and-click method”
  • 8. Background: What is “REST”? Martin Fowler: Level 0 to Level 4
  • 10. POX: Plain Old Xml (or JSON) (Yeah, I’m saying your REST API ain’t REST)
  • 11. Skip a few: Rest Level 3 Hypermedia Controls
  • 12. Skip a few: Rest Level 3 Hypermedia Controls (HATEOAS)
  • 14. HATEOAS: Hypertext As The Engine Of Application State Great example: HTML w/o JS.
  • 15. New world order: HTML does not always translate across devices the way we want it to! (dangit)
  • 16. Solutions? REST L4 in other forms, interpreted on device (like… a compat layer in-browser, NativeScript, Electron, React Native, …)
  • 17. Solution I’m using right now? JSON Hyperschema (with nonstandard extensions) Alternatives? VND is most popular, others are out there but rarer
  • 18. Why JSON Hyperschema? It’s made for this problem: self-describing APIs and objects.
  • 19. Example: { "$schema": “http://json-schema.org/schema#", “type”: “person”, “X-name”: “Israel”, “links”: [ { “rel”: “profile”, “href”: “https://www.facebook.com/israelshirk" }, { “rel”: “hubgit” “href": “https://github.com/israelshirk" } ] }
  • 20. Declare as JSON schema: { "$schema": “http://json-schema.org/schema#", “type”: “person”, “X-name”: “Israel”, “links”: [ { “rel”: “profile”, “href”: “https://www.facebook.com/israelshirk" }, { “rel”: “hubgit” “href": “https://github.com/israelshirk" } ] }
  • 21. Define type of object (technically the RFC doesn’t allow this but… Open source to the rescue!) { "$schema": “http://json-schema.org/schema#", “type”: “person”, “X-name”: “Israel”, “links”: [ { “rel”: “profile”, “href”: “https://www.facebook.com/israelshirk" }, { “rel”: “hubgit” “href": “https://github.com/israelshirk" } ] }
  • 22. Custom extensions start with X- to be mostly in-line with standard { "$schema": “http://json-schema.org/schema#", “type”: “person”, “X-name”: “Israel”, “links”: [ { “rel”: “profile”, “href”: “https://www.facebook.com/israelshirk" }, { “rel”: “hubgit” “href": “https://github.com/israelshirk" } ] }
  • 23. Links to indicate paths that can be followed { "$schema": “http://json-schema.org/schema#", “type”: “person”, “X-name”: “Israel”, “links”: [ { “rel”: “profile”, “href”: “https://www.facebook.com/israelshirk" }, { “rel”: “hubgit” “href": “https://github.com/israelshirk" } ] } http://json-schema.org/latest/json-schema-hypermedia.html#rfc.section.5
  • 24. We can then start doing really fancy stuff: { "$schema": “http://json-schema.org/schema#", “type”: “person”, “X-name”: “Israel”, “X-profile-name”: “israelshirk”, “X-Friends”: { “$ref”: “/{profile}/friendlist” }, “links”: [ { “rel”: “profile”, “href”: “https://www.facebook.com/{profile}" }, { “rel”: “hubgit”, “href": “https://github.com/{profile}" }, { “rel”: “save”, “href”: “/{profile}” } ] }
  • 25. Critical factors: Easy-to-use interpreters. Check out: Mozilla’s React-Jsonschema-Form (I’m a rabble-rouser there) Angular-Schema-Form (schemaform.io - just a bug fixer here) JS lib for JSON hyper schema validation. I have a fork…. Somew Then: Custom components for your object types! Webcomponents are essential here.
  • 26. eact-Jsonschema-Form: https://github.com/mozilla-services/react- function PageLayout(props) { const {children, schema} = props; return ( <div class=“root”> <!— This is the root page element. Children of the schema go into children below! —> {children} </div> ); } render(( <Form schema={schema} fields={ { “page-layout”: PageLayout } } />, ), document.getElementById("app"));
  • 27. eact-Jsonschema-Form: https://github.com/mozilla-services/react- function PageLayout(props) { const {children, schema} = props; return ( <div class=“root”> <!— This is the root page element. Children of the schema go into children below! —> <div className=“col-xs-12”> <Form schema={schema[‘X-header’]} fields={fields} > </div> ); } let fields = { PageLayout: PageLayout } render(( <Form schema={schema} fields={ fields } />, ), document.getElementById("app"));
  • 28. u can do things like this, and each client will have an appropriate r laid out differently by device type - but all from the same backend { “type”: “page-layout”, “properties”: { “header”: { “type”: “array”, “items”: [ { “type”: “header-item”, “title”: “Click me!”, “links”: [{ “link”: “/clickme” }] } ], }, “body”: { “type”: “person”, … } } }
  • 29. End result? Data-centric wonderfulness server-side, render-centric focus client-side! Next steps? Integration into nginx+lua+memcache for ref resolution, like Varnish/Akamai for ESI Add more gif (spoken as spelled) Public code samples