SlideShare une entreprise Scribd logo
1  sur  29
The transparent web
 Bridging the chasm in web development
“The best way to predict the
   future is to invent it.”
                     -Alan Kay
How did we get here?

• Shout-out to TBL!

•Web: 21 years and 12 days old!

•Was: Pages

•Nowadays: Applications...
What do I mean by “transparent
             web?”

• You know you are designing for two different platforms:

• Server-side

•Client-side
•“Transparent web” - you shouldn’t have to!
How?
•It’s early and techniques vary, but there are some themes:
 • [Purely] functional

 •Strongly typed
 •Automatic generation of client/server communication
 •Explicit syntax for DB/HTML (or a DSL)
 •Functional reactive code for UI
Why?

• Three main problems of webapps:

• Security

• Tons of sometimes-conflicting languages

•You’re often also the sysadmin
Security

• Injection attacts:

 •Often a confusion of type: string vs. SQL vs. JavaScript

 •Fix with types:

         <html>foo</html> != “<html>foo</html>”
Tons of languages

• Tower of Babel...

•Languages or markup needed by the working web
  developer (there are more + var. frameworks):

 • Markup (HTML), application code (Ruby), client-side
   (JavaScript), javascript abstraction layer (jQuery &etc.),
   style (CSS), DB (SQL)
Sysadminery
•Configuring hosts files
•Setting up:

 •RDBMSs
 •Web servers
 •Deployment
•This is all vitally important, but it’s not programming
It’s going to ruin my code

•It is common to have that feeling:

1. “That C code is going to produce crap compared to what I
   could write in assembly” - J. Random Hacker

2. “Garbage collection means that my program is going to be
   slow and crappy.” - J. Random Hacker, Jr.
It’s going to ruin my code
•But, history has chosen:
  1. Assembly vs. C (or other HLL) is settled:
     high-level languages.

  2. Manual vs. automatic memory management perhaps settled:
     automatic (garbage collection).

• Programmer productivity & the elimination of certain kinds of
  errors is usually a big win
It’s going to ruin my code
•I have seen the future and
it is:

•Separate client/server
    apps & programmer-
    managed distribution vs.
    unified app & automatic
    distribution:
    unified & automatic
What’s the alternative?

• For the first time, some are starting to show up!

•Opa

•Ur/Web

•Meteor.js ran out of time :(
Our first examples

•Let’s do “Hello world!”... <sigh>
•But it gets you past the “how the !@#&^$ do I even compile
  this?” phase (or at least for me)

• And they fit on slides :)
Opa: Hello world!
helloworld.opa
function main() {
    <h1>Hello, world!</h1>
}

Server.start(Server.http,
             {title: "Hello, world!", page: main})
*cough* node.js *cough*

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello Worldn');
}).listen(1337, '127.0.0.1');
Opa: Hello world!


...compile, run:
$ opa helloworld.opa
$ ./helloworld.js
http://localhost:8080
Opa: Hello world!

•main returns an xhtml fragment, the compiler knows that this
  is XHTML and not a string

•   notice lack of: “ “

•the server then sets us up with a page
Ur/Web: Hello world!
  helloworld.ur
  fun main () = return <xml>
    <head>
      <title>Hello world!</title>
    </head>

    <body>
      <h1>Hello world!</h1>
    </body>
  </xml>
Ur/Web: Hello world!
  helloworld.urp
  helloworld

  helloworld.urs
  val main : unit -> transaction page


  ...compile, run:
  $ urweb helloworld
  $ ./urweb.exe
  http://localhost:8080/Helloworld/main
Ur/Web: Hello world!



•
The <xml> is a type that the compiler knows about
Another Example

• Let’s storycard this: I’d like to be able to...

• Fill in name, comment, email, click “comment” and

•Show past comments (implies persistent storage)
Opa: Comments



•
Source...
Opa: Comments


•
To compile and run:
opa comments.opa
./comments.js
[...creates mongodb datastore...]
Ur/Web: Comments

• Sources...

• comments.urs

• comments.urp

•comments.ur
Ur/Web: Comments
•To compile:
  urweb urweb -dbms mysql comments

• Create database table (MySQL in my case):
  mysql -u root -p1234 < comments.sql

• Run!
  ./comments.exe
Thanks!
• I’m Chris Wilson:

•chris@bendyworks.com
• @twopoint718

•Normally, I hack Rails for Bendyworks

• ...and thanks to them for letting me use some 20% time for
   this :)
Questions



•
I’ll do my best :)
Resources
1. http://opalang.org/

 1.1.http://www.mongodb.org/

 1.2.http://nodejs.org/

2. http://www.impredicative.com/ur/

 2.1.http://www.expdev.net/urtutorial/

Contenu connexe

Tendances

Re-Introduction to Third-party Scripting
Re-Introduction to Third-party ScriptingRe-Introduction to Third-party Scripting
Re-Introduction to Third-party Scripting
benvinegar
 
The ideal module system and the harsh reality
The ideal module system and the harsh realityThe ideal module system and the harsh reality
The ideal module system and the harsh reality
Adam Warski
 
HTML5 Dev Conf - Sass, Compass & the new Webdev tools
HTML5 Dev Conf - Sass, Compass &  the new Webdev toolsHTML5 Dev Conf - Sass, Compass &  the new Webdev tools
HTML5 Dev Conf - Sass, Compass & the new Webdev tools
Dirk Ginader
 
Advanced WordPress Development Environments
Advanced WordPress Development EnvironmentsAdvanced WordPress Development Environments
Advanced WordPress Development Environments
Beau Lebens
 
Fighting Ruby code smell
Fighting Ruby code smellFighting Ruby code smell
Fighting Ruby code smell
olegshpynov
 
Custom Post Types in Depth at WordCamp Montreal
Custom Post Types in Depth at WordCamp MontrealCustom Post Types in Depth at WordCamp Montreal
Custom Post Types in Depth at WordCamp Montreal
Joey Kudish
 

Tendances (20)

The no-framework Scala Dependency Injection Framework
The no-framework Scala Dependency Injection FrameworkThe no-framework Scala Dependency Injection Framework
The no-framework Scala Dependency Injection Framework
 
Brownbag on basics of web components
Brownbag on basics of web componentsBrownbag on basics of web components
Brownbag on basics of web components
 
Front End Development Automation with Grunt
Front End Development Automation with GruntFront End Development Automation with Grunt
Front End Development Automation with Grunt
 
Re-Introduction to Third-party Scripting
Re-Introduction to Third-party ScriptingRe-Introduction to Third-party Scripting
Re-Introduction to Third-party Scripting
 
HTTP cache: keeping it fresh
HTTP cache: keeping it freshHTTP cache: keeping it fresh
HTTP cache: keeping it fresh
 
The ideal module system and the harsh reality
The ideal module system and the harsh realityThe ideal module system and the harsh reality
The ideal module system and the harsh reality
 
Front End Development - Beyond Javascript (Robin Cannon)
Front End Development - Beyond Javascript (Robin Cannon)Front End Development - Beyond Javascript (Robin Cannon)
Front End Development - Beyond Javascript (Robin Cannon)
 
HTML5 Dev Conf - Sass, Compass & the new Webdev tools
HTML5 Dev Conf - Sass, Compass &  the new Webdev toolsHTML5 Dev Conf - Sass, Compass &  the new Webdev tools
HTML5 Dev Conf - Sass, Compass & the new Webdev tools
 
Advanced WordPress Development Environments
Advanced WordPress Development EnvironmentsAdvanced WordPress Development Environments
Advanced WordPress Development Environments
 
Put a little Backbone in your WordPress
Put a little Backbone in your WordPressPut a little Backbone in your WordPress
Put a little Backbone in your WordPress
 
Ruby On Rails Basics
Ruby On Rails BasicsRuby On Rails Basics
Ruby On Rails Basics
 
Fighting Ruby code smell
Fighting Ruby code smellFighting Ruby code smell
Fighting Ruby code smell
 
A modern front end development workflow for Magnolia at Atlassian
A modern front end development workflow for Magnolia at AtlassianA modern front end development workflow for Magnolia at Atlassian
A modern front end development workflow for Magnolia at Atlassian
 
Custom Post Types in Depth at WordCamp Montreal
Custom Post Types in Depth at WordCamp MontrealCustom Post Types in Depth at WordCamp Montreal
Custom Post Types in Depth at WordCamp Montreal
 
Becoming a better WordPress Developer
Becoming a better WordPress DeveloperBecoming a better WordPress Developer
Becoming a better WordPress Developer
 
Block the System - building blocks in Gutenberg
Block the System - building blocks in GutenbergBlock the System - building blocks in Gutenberg
Block the System - building blocks in Gutenberg
 
RoR (Ruby on Rails)
RoR (Ruby on Rails)RoR (Ruby on Rails)
RoR (Ruby on Rails)
 
C# Powershell and an Azure Function Walk Into a Bar...
C# Powershell and an Azure Function Walk Into a Bar... C# Powershell and an Azure Function Walk Into a Bar...
C# Powershell and an Azure Function Walk Into a Bar...
 
WordPress as the Backbone(.js)
WordPress as the Backbone(.js)WordPress as the Backbone(.js)
WordPress as the Backbone(.js)
 
Lua web development and Sailor @conc_at 2015
Lua web development and Sailor @conc_at 2015Lua web development and Sailor @conc_at 2015
Lua web development and Sailor @conc_at 2015
 

En vedette (8)

The origins of
The origins ofThe origins of
The origins of
 
AngularJS
AngularJSAngularJS
AngularJS
 
Rc - The Plan 9 Shell
Rc - The Plan 9 ShellRc - The Plan 9 Shell
Rc - The Plan 9 Shell
 
Information Technology Particle Accelerator
Information Technology Particle AcceleratorInformation Technology Particle Accelerator
Information Technology Particle Accelerator
 
Let's Build A Particle Accelerator
Let's Build A Particle AcceleratorLet's Build A Particle Accelerator
Let's Build A Particle Accelerator
 
SafePeak @ large telco - Sharepoint benchmark
SafePeak @ large telco - Sharepoint benchmarkSafePeak @ large telco - Sharepoint benchmark
SafePeak @ large telco - Sharepoint benchmark
 
CHARGE PARTICLE ACCELERATORCharge particle accelerator
CHARGE PARTICLE ACCELERATORCharge particle acceleratorCHARGE PARTICLE ACCELERATORCharge particle accelerator
CHARGE PARTICLE ACCELERATORCharge particle accelerator
 
Particle accelerator
Particle acceleratorParticle accelerator
Particle accelerator
 

Similaire à The Transparent Web: Bridging the Chasm in Web Development

Week01 jan19 introductionto_php
Week01 jan19 introductionto_phpWeek01 jan19 introductionto_php
Week01 jan19 introductionto_php
Jeanho Chu
 
Week01 jan19 introductionto_php
Week01 jan19 introductionto_phpWeek01 jan19 introductionto_php
Week01 jan19 introductionto_php
Jeanho Chu
 
Node Security: The Good, Bad & Ugly
Node Security: The Good, Bad & UglyNode Security: The Good, Bad & Ugly
Node Security: The Good, Bad & Ugly
Bishan Singh
 
Trends in programming languages
Trends in programming languagesTrends in programming languages
Trends in programming languages
Antya Dev
 
Intro to node and mongodb 1
Intro to node and mongodb   1Intro to node and mongodb   1
Intro to node and mongodb 1
Mohammad Qureshi
 

Similaire à The Transparent Web: Bridging the Chasm in Web Development (20)

Why ruby and rails
Why ruby and railsWhy ruby and rails
Why ruby and rails
 
How does the Internet Work?
How does the Internet Work?How does the Internet Work?
How does the Internet Work?
 
Phonegap Day 2016: Ember/JS & Hybrid Apps Tips
Phonegap Day 2016: Ember/JS & Hybrid Apps TipsPhonegap Day 2016: Ember/JS & Hybrid Apps Tips
Phonegap Day 2016: Ember/JS & Hybrid Apps Tips
 
Intro to Ruby on Rails
Intro to Ruby on RailsIntro to Ruby on Rails
Intro to Ruby on Rails
 
Week01 jan19 introductionto_php
Week01 jan19 introductionto_phpWeek01 jan19 introductionto_php
Week01 jan19 introductionto_php
 
Getting started with Emscripten – Transpiling C / C++ to JavaScript / HTML5
Getting started with Emscripten – Transpiling C / C++ to JavaScript / HTML5Getting started with Emscripten – Transpiling C / C++ to JavaScript / HTML5
Getting started with Emscripten – Transpiling C / C++ to JavaScript / HTML5
 
Week01 jan19 introductionto_php
Week01 jan19 introductionto_phpWeek01 jan19 introductionto_php
Week01 jan19 introductionto_php
 
Nodejs - A quick tour (v6)
Nodejs - A quick tour (v6)Nodejs - A quick tour (v6)
Nodejs - A quick tour (v6)
 
Web Development: The Next Five Years
Web Development: The Next Five YearsWeb Development: The Next Five Years
Web Development: The Next Five Years
 
About Clack
About ClackAbout Clack
About Clack
 
JavaScript : A trending scripting language
JavaScript : A trending scripting languageJavaScript : A trending scripting language
JavaScript : A trending scripting language
 
Node Security: The Good, Bad & Ugly
Node Security: The Good, Bad & UglyNode Security: The Good, Bad & Ugly
Node Security: The Good, Bad & Ugly
 
Introduction to NodeJS with LOLCats
Introduction to NodeJS with LOLCatsIntroduction to NodeJS with LOLCats
Introduction to NodeJS with LOLCats
 
Wider than rails
Wider than railsWider than rails
Wider than rails
 
Trends in programming languages
Trends in programming languagesTrends in programming languages
Trends in programming languages
 
Intro to node and mongodb 1
Intro to node and mongodb   1Intro to node and mongodb   1
Intro to node and mongodb 1
 
Nodejs - Should Ruby Developers Care?
Nodejs - Should Ruby Developers Care?Nodejs - Should Ruby Developers Care?
Nodejs - Should Ruby Developers Care?
 
Mobile native-hacks
Mobile native-hacksMobile native-hacks
Mobile native-hacks
 
Node.js: The What, The How and The When
Node.js: The What, The How and The WhenNode.js: The What, The How and The When
Node.js: The What, The How and The When
 
Solid and Sustainable Development in Scala
Solid and Sustainable Development in ScalaSolid and Sustainable Development in Scala
Solid and Sustainable Development in Scala
 

Dernier

Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 

Dernier (20)

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 

The Transparent Web: Bridging the Chasm in Web Development

  • 1. The transparent web Bridging the chasm in web development
  • 2. “The best way to predict the future is to invent it.” -Alan Kay
  • 3. How did we get here? • Shout-out to TBL! •Web: 21 years and 12 days old! •Was: Pages •Nowadays: Applications...
  • 4. What do I mean by “transparent web?” • You know you are designing for two different platforms: • Server-side •Client-side •“Transparent web” - you shouldn’t have to!
  • 5. How? •It’s early and techniques vary, but there are some themes: • [Purely] functional •Strongly typed •Automatic generation of client/server communication •Explicit syntax for DB/HTML (or a DSL) •Functional reactive code for UI
  • 6. Why? • Three main problems of webapps: • Security • Tons of sometimes-conflicting languages •You’re often also the sysadmin
  • 7. Security • Injection attacts: •Often a confusion of type: string vs. SQL vs. JavaScript •Fix with types: <html>foo</html> != “<html>foo</html>”
  • 8. Tons of languages • Tower of Babel... •Languages or markup needed by the working web developer (there are more + var. frameworks): • Markup (HTML), application code (Ruby), client-side (JavaScript), javascript abstraction layer (jQuery &etc.), style (CSS), DB (SQL)
  • 9. Sysadminery •Configuring hosts files •Setting up: •RDBMSs •Web servers •Deployment •This is all vitally important, but it’s not programming
  • 10. It’s going to ruin my code •It is common to have that feeling: 1. “That C code is going to produce crap compared to what I could write in assembly” - J. Random Hacker 2. “Garbage collection means that my program is going to be slow and crappy.” - J. Random Hacker, Jr.
  • 11. It’s going to ruin my code •But, history has chosen: 1. Assembly vs. C (or other HLL) is settled: high-level languages. 2. Manual vs. automatic memory management perhaps settled: automatic (garbage collection). • Programmer productivity & the elimination of certain kinds of errors is usually a big win
  • 12. It’s going to ruin my code •I have seen the future and it is: •Separate client/server apps & programmer- managed distribution vs. unified app & automatic distribution: unified & automatic
  • 13. What’s the alternative? • For the first time, some are starting to show up! •Opa •Ur/Web •Meteor.js ran out of time :(
  • 14. Our first examples •Let’s do “Hello world!”... <sigh> •But it gets you past the “how the !@#&^$ do I even compile this?” phase (or at least for me) • And they fit on slides :)
  • 15. Opa: Hello world! helloworld.opa function main() { <h1>Hello, world!</h1> } Server.start(Server.http, {title: "Hello, world!", page: main})
  • 16. *cough* node.js *cough* var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello Worldn'); }).listen(1337, '127.0.0.1');
  • 17. Opa: Hello world! ...compile, run: $ opa helloworld.opa $ ./helloworld.js http://localhost:8080
  • 18. Opa: Hello world! •main returns an xhtml fragment, the compiler knows that this is XHTML and not a string • notice lack of: “ “ •the server then sets us up with a page
  • 19. Ur/Web: Hello world! helloworld.ur fun main () = return <xml> <head> <title>Hello world!</title> </head> <body> <h1>Hello world!</h1> </body> </xml>
  • 20. Ur/Web: Hello world! helloworld.urp helloworld helloworld.urs val main : unit -> transaction page ...compile, run: $ urweb helloworld $ ./urweb.exe http://localhost:8080/Helloworld/main
  • 21. Ur/Web: Hello world! • The <xml> is a type that the compiler knows about
  • 22. Another Example • Let’s storycard this: I’d like to be able to... • Fill in name, comment, email, click “comment” and •Show past comments (implies persistent storage)
  • 24. Opa: Comments • To compile and run: opa comments.opa ./comments.js [...creates mongodb datastore...]
  • 25. Ur/Web: Comments • Sources... • comments.urs • comments.urp •comments.ur
  • 26. Ur/Web: Comments •To compile: urweb urweb -dbms mysql comments • Create database table (MySQL in my case): mysql -u root -p1234 < comments.sql • Run! ./comments.exe
  • 27. Thanks! • I’m Chris Wilson: •chris@bendyworks.com • @twopoint718 •Normally, I hack Rails for Bendyworks • ...and thanks to them for letting me use some 20% time for this :)
  • 29. Resources 1. http://opalang.org/ 1.1.http://www.mongodb.org/ 1.2.http://nodejs.org/ 2. http://www.impredicative.com/ur/ 2.1.http://www.expdev.net/urtutorial/

Notes de l'éditeur

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. Link is on dropbox!\n
  24. \n
  25. Link is on dropbox!\n
  26. \n
  27. \n
  28. \n
  29. \n