Modern WebTechnologies (and why   you should care)  Reuven M. Lerner • reuven@lerner.co.il               Megacomm         ...
Who am I?• Web developer since 1993• Software architect/consultant/trainer• Linux Journal columnist since 1996• Mostly Rub...
How does the Internet  (TCP/IP) work?                 “Socket” Client                            Server          Port     ...
How does the Internet   (TCP/IP) work?                   “Socket”   Client                            Server            Po...
How does the Internet   (TCP/IP) work?                   “Socket”   Client                            Server            Po...
Protocols• Communication standards built on top of  TCP/IP, typically text-based • SMTP (e-mail) • FTP (file transfer) • NN...
WWW: Three technologies• Markup format:  HTML• URL: protocol +  server + port + doc• Protocol: HTTP
How the Web worksBrowser      Server
How the Web works          HTTP RequestBrowser                  Server
How the Web works          HTTP RequestBrowser                   Server          HTTP Response
How the Web works          HTTP RequestBrowser                          Server          HTTP Response Stateless — after th...
Simple requestBrowser          Server
Simple request          GET /Browser           Server
Simple request          GET /Browser                  Server              200 OK              <html>              <head>.....
Not found?Browser                Server
Not found?           GET /blahblahBrowser                    Server
Not found?           GET /blahblahBrowser                       Server                   404 Not found
Three things are certain:Death, taxes, and lost data.Guess which has occurred. — David Dixon, Salon magazine contest
Submitting formsBrowser         Server
Submitting forms          POST /login          name=reuven&password=secretBrowser                      Server
Submitting forms          POST /login          name=reuven&password=secretBrowser                      Server             ...
Document = request• If an HTML page contains images, then each  is retrieved in a separate HTTP request • Page with 30 ima...
Idea: Lie to the browser• Don’t return a document to the user• Rather, run a program when the user makes  a request, and s...
Just in time production• Wait as long as  possible to create  pages for the user• Ideally, create them  when the user  req...
Dynamic documentBrowser      Server
Dynamic document          GET /Browser           Server
Dynamic document          GET /Browser                  Server              200 OK              <html>              <head>...
Dynamic document                 GET /Browser                         Server                     200 OK                   ...
What we return• Usually HTML• Image (e.g., stock graphs, Google Analytics)• Word/Excel doc (e.g., from Google docs)• PDF (...
APIs and mobile appsComputer A     Computer B (browser)      (server)
APIs and mobile apps             GET /Computer A           Computer B (browser)            (server)
APIs and mobile apps             GET /Computer A                Computer B (browser)                 (server)             ...
APIs and mobile apps       GET /                    Computer B                     (server)           200 OK           <so...
APIs and mobile apps       GET /                    Computer B                     (server)           200 OK           <so...
APIs and mobile apps       GET /                    Computer B                     (server)           200 OK           <so...
APIs and mobile apps       GET /                    Computer B                     (server)           200 OK           <so...
What is a Web app?• Receives its inputs via HTTP• Sends its output via HTTP• That’s it! A Web application can do  anything...
That’s it!• Now you understand how the Web works.• Really, that’s it.• Go home.
OK, perhaps not...• How do we write these programs?• Where (and how) do we store user data?• How have the underlying techn...
Early Web applications• First server-side programs were in C• They were compiled into binaries • So you had the CGI source...
“Scripting” languages• No explicit compilation• Cross platform• Built-in, powerful text functions• Do a lot in a little bi...
Frameworks• DRY (Don’t repeat yourself)• Get rid of the drudgery• Concentrate on your business, rather than  worrying abou...
MVC paradigm• Most modern frameworks use MVC• From Smalltalk in the 1980s! • Model — communicates with database • View — H...
Web frameworks in  dynamic languages• Programmer speed trumps execution  speed• Community support• Plugins for commonly re...
Ruby on Rails• Ruby language• Rails Web app framework (MVC)• Designed for writing Web DSLs• “Convention over configuration”...
Person modelclass Person < ActiveRecord::Baseend
Where’s the definition?• The computer takes care of it automatically• ActiveRecord knows what columns you  have defined, and...
Not only Rails• Python (Django)• PHP (Symfony)• Perl (Catalyst)• Groovy (Grails)• Even if you don’t use Ruby on Rails, you...
Plugins• Rails (and other systems) have open-source  plugins to handle common issues  • Authentication  • E-commerce  • So...
Storage• Applications are great!• But what if we want to store information  about our users? • Name, e-mail address, accou...
What is a database? Store data confidently                   DatabaseRetrieve data   flexibly
Relational databases   Define tables,store data in them                     DatabaseRetrieve data from  related tables
Relational databaseCREATE TABLE   INSERT      SQL goes here                               Database  UPDATE  DELETE
Relational databases• Everything is stored in 2-dimensional tables• Data should appear only once (normalized)• “Join” tabl...
id   first_name   last_name      phone1     Reuven      Lerner     054-496-84052     Charlie     Kalech     02-671-9918
id       first_name     last_name         email     1        Reuven        Lerner     reuven@lerner.co.il     2        Char...
id          first_name          last_name           email    1             Reuven            Lerner       reuven@lerner.co....
id          first_name          last_name           email      1             Reuven            Lerner       reuven@lerner.c...
Another language!• SQL is the language of relational databases• So a Web app will use a language (e.g.,  Ruby, Python, or ...
Extending our diagram  Browser
Extending our diagram            HTTP Request  Browser
Extending our diagram            HTTP Request  Browser                  Server
Extending our diagram            HTTP Request  Browser                  Server
Extending our diagram            HTTP Request  Browser                  Server                           Database
Extending our diagram            HTTP Request  Browser                  Server                           Database
Extending our diagram            HTTP Request  Browser                   Server            HTTP Response                  ...
Popular databases• PostgreSQL (my favorite)• MySQL• Microsoft SQL Server• Oracle• Most popular: SQLite!
Scaling problems• Lots of requests? • Optimize
Scaling problems• Lots of requests? • Optimize• Even more requests? • Buy a bigger server
Scaling problems• Lots of requests? • Optimize• Even more requests? • Buy a bigger server• What next? • Panic! (Or spend l...
Sharding• Split your data across multiple databases• This works, but... • Requires rewriting a lot of code • Maintenance i...
Non-relational        databases• Don’t store things in tables!• Don’t pre-define a schema• No SQL! • Indeed, known as “NoSQ...
Examples• Key-value stores • e.g., Memcached, Redis, Tokyo Cabinet• Columnar databases • e.g., Cassandra• Document databas...
MapReduce / Hadoop• Google and Yahoo do it like this: • Split data across many servers • Run a function on all of those se...
NoSQL: Good news• Often easier to administer, configure • Scaling to multiple servers is a no-brainer• No new programming l...
NoSQL: Bad news• Speed is in the eye of the beholder• Is “eventually consistent” good enough?• Non-normalized data — ugh!•...
Meanwhile...• Our browsers are displaying HTML• HTML had several problems: • Standardized set of tags • Making it easy for...
HTML standards• HTML — several versions, several  standards, none universally accepted• XML — lets us create HTML-like  la...
HTML5• Relaxes much of the formality of XHTML,  while remaining easy for computers to read• Backward compatible to a large...
HTML5 declaration
HTML5 declaration<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran...
HTML5 declaration<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran...
New “email” tag<input type=”text” name=”email” /><input type=”email” name=”email” />
New “url” tag<input type=”text” name=”url” /><input type=”url” name=”url” />
New “date” tag<input type=”date” name=”date” />
Color picker!<input type=”color” name=”color” />
And more• Validation — built-in validation of form  element inputs, via regular expressions  • No more JavaScript plugins!...
My favorite• Private data in attributes!• Any attribute starting with “data-” is  considered valid• A great way to stash i...
Oh, yeah• These don’t all work.• Many of them don’t work on any browser• Most work on only some browsers.• What to do? Wai...
CSS• Cascading Style Sheets• Split semantic markup from presentation• One CSS file can apply to an entire site• No more “st...
Ids are unique<p id=”important”>Agenda</p>p#important {    font-size: 13p;    font-weight: bold;}
Classes can repeat<p class=”important”>Agenda</p><p class=”important”>Lunch</p>p.important {    font-size: 13p;    font-we...
It gets better• You can set styles for when the user’s  mouse hovers over or clicks on an element• In other words: Cheap a...
CSS3: Cool effects• Rounded corners• Transparency• Text shadows and drop shadows• Gradients
CSS3: Cool selectors• If you love regular expressions, then these  selectors will be second nature to you: p[id=”foo”] { b...
CSS3: Cool selectors• If you love regular expressions, then these  selectors will be second nature to you: p[id=”foo”] { b...
CSS3: Cool selectors• If you love regular expressions, then these  selectors will be second nature to you: p[id=”foo”] { b...
CSS3: Cool selectors• If you love regular expressions, then these  selectors will be second nature to you: p[id=”foo”] { b...
CSS3: Cool selectors• If you love regular expressions, then these  selectors will be second nature to you: p[id=”foo”] { b...
OK, that’s nice.• But really, the big news with HTML5  doesn’t have to do with HTML at all.• Instead, it has to do with Ja...
JavaScript• Originally “LiveScript,” a language that  executes programs in the browser• Renamed “JavaScript” when an unrel...
HTML5 turns thebrowser into a smart,powerful, networkedapplication platform. JavaScript makes it      possible.
Powerful? Huh?• Didn’t I just say that I love to hate  JavaScript?• And then I said that it was powerful?• What gives?
JavaScript is      the new hotness• Browsers are competing for fastest, best • Google’s V8 • Mozilla’s TraceMonkey (and Jä...
Server-side JavaScript!• The latest JavaScript development• Run it on your server!• Why? Because it’s super-fast
Also: frameworks• Remove the drudgery of JavaScript• Handle differences between browsers• Make it easy to perform common t...
JavaScript frameworks• Dojo• YUI• MooTools• Prototype• jQuery (the 900-pound gorilla)
jQuery• jQuery has taken the world by storm • Super-easy to use • Extremely fast • Open source (of course!) • Easy to writ...
Ajax• One reason for JavaScript libraries: Ajax!• Make HTTP requests from within the page• No refresh! Just get results fr...
AjaxBrowser          Server
Ajax          POST /login          name=reuven&password=secretBrowser                      Server
Ajax          POST /login          name=reuven&password=secretBrowser                      Server                  200 OK ...
Ajax          POST /login          name=reuven&password=secretBrowser                      Server                  200 OK ...
Ajax          POST /login          name=reuven&password=secretBrowser                      Server                  200 OK ...
Ajax          POST /login          name=reuven&password=secretBrowser                      Server                  200 OK ...
Ajax          POST /login          name=reuven&password=secretBrowser                      Server                  200 OK ...
Ajax isn’t everything• What if I want a chat application, or  something else that stays open?• What if I want to execute m...
Canvas• A complete drawing area, in your browser!• Use JavaScript to: • Draw arbitrary shapes • Detect the mouse • Detect ...
Geolocation• Your browser can know where you are!• It can send this info to the server• It’s not perfect, but still pretty...
Inter-page      communication• Modern Web apps can span multiple pages• HTML5 makes it easy for two pages (from  the same ...
Web sockets• This is potentially the biggest deal of all• Ajax allows for server connections. But: • High overhead • State...
Using Web sockets
Using Web socketsvar weatherSocket = newWebSocket("ws://localhost:8080");
Using Web socketsvar weatherSocket = newWebSocket("ws://localhost:8080");weatherSocket.onopen = function(e){ alert("Opened...
Using Web socketsvar weatherSocket = newWebSocket("ws://localhost:8080");weatherSocket.onopen = function(e){ alert("Opened...
Using Web socketsvar weatherSocket = newWebSocket("ws://localhost:8080");weatherSocket.onopen = function(e){ alert("Opened...
What can sockets do?• Chat servers• Stock feeds• Teleconferencing• Who knows? • Remember, HTTP was only invented after    ...
Web workers• Execute more than one thing at a time• In other words:You can run JavaScript  functions in the background • P...
Local storage• Now Web apps can store data• A little database of name-value pairs  var foo = localStorage.getItem("bar"); ...
Local storage• Now Web apps can store data• A little database of name-value pairs  var foo = localStorage.getItem("bar"); ...
Local storage• Now Web apps can store data• A little database of name-value pairs  var foo = localStorage.getItem("bar"); ...
Media• Standard (well, sort of) ways to play audio  and video  • No more Flash!• Problem: No one format is supported by al...
Rich client-side      frameworks• Backbone• Ember
Design frameworks• Twitter bootstrap• Blueprint• Compass
Don’t forget mobile!• iOS and Android are growing massively• Web site vs. native app? • (Ask Jakob Nielsen — for now, apps...
Want a Web app?• It used to be: • “What operating system, language, and    database will I use?”• Or: • “How can I produce...
Now it’s:• What experience do we want to give  people?• What will they be using to access our  system?
Those lead to a wide variety of questions:• What server language and framework?  JavaScript framework? Hosted or cloud?• W...
The key takeaway• Web sites are far more than just static  text, blogs, or forums• They’re full-fledged software applicatio...
Oh, yeah: Testing• Automated testing is amazing• Your Web site should use it• Most modern frameworks support some  sort of...
My brain is too small!• Yes, there’s a lot to learn• Most of it can wait a little bit• There are oodles of tutorials  and ...
Whew!• There’s a lot to the modern Web• It’s fun and exciting, and continues to move  forward at breakneck speed• Understa...
Any questions?• Call me: 054-496-8405• E-mail me: reuven@lerner.co.il• Interrupt me: reuvenlerner (Skype/AIM)
Modern Web technologies (and why you should care): Megacomm, Jerusalem, February 2012
Modern Web technologies (and why you should care): Megacomm, Jerusalem, February 2012
Modern Web technologies (and why you should care): Megacomm, Jerusalem, February 2012
Modern Web technologies (and why you should care): Megacomm, Jerusalem, February 2012
Modern Web technologies (and why you should care): Megacomm, Jerusalem, February 2012
Modern Web technologies (and why you should care): Megacomm, Jerusalem, February 2012
Modern Web technologies (and why you should care): Megacomm, Jerusalem, February 2012
Upcoming SlideShare
Loading in...5
×

Modern Web technologies (and why you should care): Megacomm, Jerusalem, February 2012

2,641

Published on

My talk from the Megacomm 2012 conference in Jerusalem, on February 16th, 2012. I describe the fundamental underpinnings of the Web, how things have changed on both the browser and server sides, and what these technologies mean for users..

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,641
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
38
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Modern Web technologies (and why you should care): Megacomm, Jerusalem, February 2012

    1. 1. Modern WebTechnologies (and why you should care) Reuven M. Lerner • reuven@lerner.co.il Megacomm February 15th, 2012
    2. 2. Who am I?• Web developer since 1993• Software architect/consultant/trainer• Linux Journal columnist since 1996• Mostly Ruby on Rails + PostgreSQL, but also Python, jQuery, MySQL, and more...• PhD candidate at Northwestern University
    3. 3. How does the Internet (TCP/IP) work? “Socket” Client Server Port Port
    4. 4. How does the Internet (TCP/IP) work? “Socket” Client Server Port PortClient opensconnection
    5. 5. How does the Internet (TCP/IP) work? “Socket” Client Server Port PortClient opens Server acceptsconnection connection
    6. 6. Protocols• Communication standards built on top of TCP/IP, typically text-based • SMTP (e-mail) • FTP (file transfer) • NNTP (transfer of “news” articles)
    7. 7. WWW: Three technologies• Markup format: HTML• URL: protocol + server + port + doc• Protocol: HTTP
    8. 8. How the Web worksBrowser Server
    9. 9. How the Web works HTTP RequestBrowser Server
    10. 10. How the Web works HTTP RequestBrowser Server HTTP Response
    11. 11. How the Web works HTTP RequestBrowser Server HTTP Response Stateless — after the response is sent,the connection is broken and forgotten
    12. 12. Simple requestBrowser Server
    13. 13. Simple request GET /Browser Server
    14. 14. Simple request GET /Browser Server 200 OK <html> <head>...</head> <body>...</body> </html>
    15. 15. Not found?Browser Server
    16. 16. Not found? GET /blahblahBrowser Server
    17. 17. Not found? GET /blahblahBrowser Server 404 Not found
    18. 18. Three things are certain:Death, taxes, and lost data.Guess which has occurred. — David Dixon, Salon magazine contest
    19. 19. Submitting formsBrowser Server
    20. 20. Submitting forms POST /login name=reuven&password=secretBrowser Server
    21. 21. Submitting forms POST /login name=reuven&password=secretBrowser Server 200 OK <html>... <p>Thank you!</p> ...</html>
    22. 22. Document = request• If an HTML page contains images, then each is retrieved in a separate HTTP request • Page with 30 images = 31 HTTP requests • Page with 20 images, 10 JavaScript files, and 5 CSS files = 36 HTTP requests
    23. 23. Idea: Lie to the browser• Don’t return a document to the user• Rather, run a program when the user makes a request, and send the program’s output• If the output is in HTML, then the browser will show it no differently than a static doc
    24. 24. Just in time production• Wait as long as possible to create pages for the user• Ideally, create them when the user requests them• “Mass customization”
    25. 25. Dynamic documentBrowser Server
    26. 26. Dynamic document GET /Browser Server
    27. 27. Dynamic document GET /Browser Server 200 OK <html> <head>...</head> <body>...</body> </html>
    28. 28. Dynamic document GET /Browser Server 200 OK <html> <head>...</head>Program output <body>...</body> </html>
    29. 29. What we return• Usually HTML• Image (e.g., stock graphs, Google Analytics)• Word/Excel doc (e.g., from Google docs)• PDF (e.g., PDF reports)• XML, JSON (for computers, not people)• Basically, any defined MIME type
    30. 30. APIs and mobile appsComputer A Computer B (browser) (server)
    31. 31. APIs and mobile apps GET /Computer A Computer B (browser) (server)
    32. 32. APIs and mobile apps GET /Computer A Computer B (browser) (server) 200 OK <some-xml> <talk>JWP</talk> </some-xml>
    33. 33. APIs and mobile apps GET / Computer B (server) 200 OK <some-xml> <talk>JWP</talk> </some-xml>
    34. 34. APIs and mobile apps GET / Computer B (server) 200 OK <some-xml> <talk>JWP</talk> </some-xml>
    35. 35. APIs and mobile apps GET / Computer B (server) 200 OK <some-xml> <talk>JWP</talk> </some-xml>
    36. 36. APIs and mobile apps GET / Computer B (server) 200 OK <some-xml> <talk>JWP</talk> </some-xml>
    37. 37. What is a Web app?• Receives its inputs via HTTP• Sends its output via HTTP• That’s it! A Web application can do anything you want, within these limits
    38. 38. That’s it!• Now you understand how the Web works.• Really, that’s it.• Go home.
    39. 39. OK, perhaps not...• How do we write these programs?• Where (and how) do we store user data?• How have the underlying technologies (URLs, HTTP, and HTML) advanced?
    40. 40. Early Web applications• First server-side programs were in C• They were compiled into binaries • So you had the CGI source (cgi-src) directory... • ... and the CGI binary (cgi-bin) directory
    41. 41. “Scripting” languages• No explicit compilation• Cross platform• Built-in, powerful text functions• Do a lot in a little bit of code• Perl, Python, PHP, Ruby• Typically open source
    42. 42. Frameworks• DRY (Don’t repeat yourself)• Get rid of the drudgery• Concentrate on your business, rather than worrying about common Web issues
    43. 43. MVC paradigm• Most modern frameworks use MVC• From Smalltalk in the 1980s! • Model — communicates with database • View — HTML/JavaScript/CSS for user • Controller — handles requests• Clear division of labor
    44. 44. Web frameworks in dynamic languages• Programmer speed trumps execution speed• Community support• Plugins for commonly requested features• Create a domain-specific language (DSL) for your specific needs
    45. 45. Ruby on Rails• Ruby language• Rails Web app framework (MVC)• Designed for writing Web DSLs• “Convention over configuration”• Thousands of little improvements• ActiveRecord — ORM
    46. 46. Person modelclass Person < ActiveRecord::Baseend
    47. 47. Where’s the definition?• The computer takes care of it automatically• ActiveRecord knows what columns you have defined, and what their types are • (More on columns later)• Only write things that cannot be understood automatically
    48. 48. Not only Rails• Python (Django)• PHP (Symfony)• Perl (Catalyst)• Groovy (Grails)• Even if you don’t use Ruby on Rails, you have benefitted from its “opinions”
    49. 49. Plugins• Rails (and other systems) have open-source plugins to handle common issues • Authentication • E-commerce • Social networking• Don’t write these yourself! Customize existing code that has proved itself
    50. 50. Storage• Applications are great!• But what if we want to store information about our users? • Name, e-mail address, account balance• We could use text files, but most people will use a database
    51. 51. What is a database? Store data confidently DatabaseRetrieve data flexibly
    52. 52. Relational databases Define tables,store data in them DatabaseRetrieve data from related tables
    53. 53. Relational databaseCREATE TABLE INSERT SQL goes here Database UPDATE DELETE
    54. 54. Relational databases• Everything is stored in 2-dimensional tables• Data should appear only once (normalized)• “Join” tables to connect tables• Technology is extremely robust, fail-safe• Not all data is a good fit for this paradigm
    55. 55. id first_name last_name phone1 Reuven Lerner 054-496-84052 Charlie Kalech 02-671-9918
    56. 56. id first_name last_name email 1 Reuven Lerner reuven@lerner.co.il 2 Charlie Kalech charlie@j-town.comperson_id phone_number 1 054-496-8405 1 847-230-9795 2 02-671-9918 2 054-803-3356 2 501-629-8620
    57. 57. id first_name last_name email 1 Reuven Lerner reuven@lerner.co.il 2 Charlie Kalech charlie@j-town.comperson_id phone_number_type_id phone_number id type 1 2 054-496-8405 1 1 847-230-9795 1 work 2 1 02-671-9918 2 mobile 2 2 054-803-3356 2 3 501-629-8620 3 fax 4 home
    58. 58. id first_name last_name email 1 Reuven Lerner reuven@lerner.co.il 2 Charlie Kalech charlie@j-town.com person_id phone_number_type_id phone_number id type 1 2 054-496-8405 1 1 847-230-9795 1 work 2 1 02-671-9918 2 mobile 2 2 054-803-3356 2 3 501-629-8620 3 fax 4 homeSELECT P.first_name, P.last_name, P.email, PN.phone_number, PNT.typeFROM People P, Phone_Numbers PN, Phone_Number_Types PNTWHERE PN.person_id = P.id AND PNT.id = PN.phone_number_type_id
    59. 59. Another language!• SQL is the language of relational databases• So a Web app will use a language (e.g., Ruby, Python, or PHP) + SQL• Or use an ORM, which automatically translates your language into SQL Person.first.phone_number
    60. 60. Extending our diagram Browser
    61. 61. Extending our diagram HTTP Request Browser
    62. 62. Extending our diagram HTTP Request Browser Server
    63. 63. Extending our diagram HTTP Request Browser Server
    64. 64. Extending our diagram HTTP Request Browser Server Database
    65. 65. Extending our diagram HTTP Request Browser Server Database
    66. 66. Extending our diagram HTTP Request Browser Server HTTP Response Database
    67. 67. Popular databases• PostgreSQL (my favorite)• MySQL• Microsoft SQL Server• Oracle• Most popular: SQLite!
    68. 68. Scaling problems• Lots of requests? • Optimize
    69. 69. Scaling problems• Lots of requests? • Optimize• Even more requests? • Buy a bigger server
    70. 70. Scaling problems• Lots of requests? • Optimize• Even more requests? • Buy a bigger server• What next? • Panic! (Or spend lots of money)
    71. 71. Sharding• Split your data across multiple databases• This works, but... • Requires rewriting a lot of code • Maintenance is a big issue • Re-sharding as each server gets overwhelmed can be expensive, time- consuming
    72. 72. Non-relational databases• Don’t store things in tables!• Don’t pre-define a schema• No SQL! • Indeed, known as “NoSQL” databases • Only common factor: No SQL, non- relational
    73. 73. Examples• Key-value stores • e.g., Memcached, Redis, Tokyo Cabinet• Columnar databases • e.g., Cassandra• Document databases • e.g., MongoDB, CouchDB
    74. 74. MapReduce / Hadoop• Google and Yahoo do it like this: • Split data across many servers • Run a function on all of those servers • Collect the results • Display to the user! • (Too slow? Add more servers!)
    75. 75. NoSQL: Good news• Often easier to administer, configure • Scaling to multiple servers is a no-brainer• No new programming language (SQL)!• Better fit for certain kinds of data• Better performance than a relational DB• Lots of options to choose from!
    76. 76. NoSQL: Bad news• Speed is in the eye of the beholder• Is “eventually consistent” good enough?• Non-normalized data — ugh!• Reporting can be harder• Less tested than relational databases • Can you trust your data to them?
    77. 77. Meanwhile...• Our browsers are displaying HTML• HTML had several problems: • Standardized set of tags • Making it easy for programs to parse • Semantic, display content were mixed
    78. 78. HTML standards• HTML — several versions, several standards, none universally accepted• XML — lets us create HTML-like languages, for computer conversations• XHTML — HTML for pedantic people• It was a big mess!
    79. 79. HTML5• Relaxes much of the formality of XHTML, while remaining easy for computers to read• Backward compatible to a large degree• Adds a number of tags for better semantics• Best of all: Lots of new JavaScript goodies • More on this in a moment
    80. 80. HTML5 declaration
    81. 81. HTML5 declaration<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    82. 82. HTML5 declaration<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html>
    83. 83. New “email” tag<input type=”text” name=”email” /><input type=”email” name=”email” />
    84. 84. New “url” tag<input type=”text” name=”url” /><input type=”url” name=”url” />
    85. 85. New “date” tag<input type=”date” name=”date” />
    86. 86. Color picker!<input type=”color” name=”color” />
    87. 87. And more• Validation — built-in validation of form element inputs, via regular expressions • No more JavaScript plugins!• Sliders — more natural numeric inputs• Canvas — draw any picture you might like, and detect/change it with software• Hints in text fields (e.g., “search”)
    88. 88. My favorite• Private data in attributes!• Any attribute starting with “data-” is considered valid• A great way to stash information inside of HTML elements without violating standards
    89. 89. Oh, yeah• These don’t all work.• Many of them don’t work on any browser• Most work on only some browsers.• What to do? Wait. Or use Modernizr, which uses JavaScript to detect features.• If a feature isn’t there, you can fall back
    90. 90. CSS• Cascading Style Sheets• Split semantic markup from presentation• One CSS file can apply to an entire site• No more “style” tags in your text!• Easy to move place things, create effects
    91. 91. Ids are unique<p id=”important”>Agenda</p>p#important { font-size: 13p; font-weight: bold;}
    92. 92. Classes can repeat<p class=”important”>Agenda</p><p class=”important”>Lunch</p>p.important { font-size: 13p; font-weight: bold;}
    93. 93. It gets better• You can set styles for when the user’s mouse hovers over or clicks on an element• In other words: Cheap animation!• Many uses of JavaScript (e.g., some menus) can now be done with simple CSS• You can make beautiful sites with CSS
    94. 94. CSS3: Cool effects• Rounded corners• Transparency• Text shadows and drop shadows• Gradients
    95. 95. CSS3: Cool selectors• If you love regular expressions, then these selectors will be second nature to you: p[id=”foo”] { background: green} p[id^=”foo”] { background: green} p[id$=”foo”] { background: green} p[id*=”foo”] { background: green}
    96. 96. CSS3: Cool selectors• If you love regular expressions, then these selectors will be second nature to you: p[id=”foo”] { background: green} Equals p[id^=”foo”] { background: green} p[id$=”foo”] { background: green} p[id*=”foo”] { background: green}
    97. 97. CSS3: Cool selectors• If you love regular expressions, then these selectors will be second nature to you: p[id=”foo”] { background: green} Starts with p[id^=”foo”] { background: green} p[id$=”foo”] { background: green} p[id*=”foo”] { background: green}
    98. 98. CSS3: Cool selectors• If you love regular expressions, then these selectors will be second nature to you: p[id=”foo”] { background: green} p[id^=”foo”] { background: green} Ends with p[id$=”foo”] { background: green} p[id*=”foo”] { background: green}
    99. 99. CSS3: Cool selectors• If you love regular expressions, then these selectors will be second nature to you: p[id=”foo”] { background: green} p[id^=”foo”] { background: green} p[id$=”foo”] { background: green} Contains p[id*=”foo”] { background: green}
    100. 100. OK, that’s nice.• But really, the big news with HTML5 doesn’t have to do with HTML at all.• Instead, it has to do with JavaScript.• Remember JavaScript?• It’s the programming language that we love to hate. (At least, I used to.)
    101. 101. JavaScript• Originally “LiveScript,” a language that executes programs in the browser• Renamed “JavaScript” when an unrelated language (“Java”) stole the thunder• Renamed (officially) ECMAScript for standardization purposes • No one actually calls it this
    102. 102. HTML5 turns thebrowser into a smart,powerful, networkedapplication platform. JavaScript makes it possible.
    103. 103. Powerful? Huh?• Didn’t I just say that I love to hate JavaScript?• And then I said that it was powerful?• What gives?
    104. 104. JavaScript is the new hotness• Browsers are competing for fastest, best • Google’s V8 • Mozilla’s TraceMonkey (and JägerMonkey) • Safari’s Nitro • IE’s Chakra• JavaScript is faster, more stable than ever!
    105. 105. Server-side JavaScript!• The latest JavaScript development• Run it on your server!• Why? Because it’s super-fast
    106. 106. Also: frameworks• Remove the drudgery of JavaScript• Handle differences between browsers• Make it easy to perform common tasks• Lots of plugins available• For me, it’s the difference between pain and pleasure when working with JavaScript
    107. 107. JavaScript frameworks• Dojo• YUI• MooTools• Prototype• jQuery (the 900-pound gorilla)
    108. 108. jQuery• jQuery has taken the world by storm • Super-easy to use • Extremely fast • Open source (of course!) • Easy to write plugins • Lots of plugins are available
    109. 109. Ajax• One reason for JavaScript libraries: Ajax!• Make HTTP requests from within the page• No refresh! Just get results from the server, and modify the page accordingly• This has revolutionized our view of Web pages
    110. 110. AjaxBrowser Server
    111. 111. Ajax POST /login name=reuven&password=secretBrowser Server
    112. 112. Ajax POST /login name=reuven&password=secretBrowser Server 200 OK <html>... <p>Thank you!</p> ...</html>
    113. 113. Ajax POST /login name=reuven&password=secretBrowser Server 200 OK <html>... <p>Thank you!</p> ...</html>
    114. 114. Ajax POST /login name=reuven&password=secretBrowser Server 200 OK <html>... <p>Thank you!</p> ...</html>
    115. 115. Ajax POST /login name=reuven&password=secretBrowser Server 200 OK <html>... <p>Thank you!</p> ...</html>
    116. 116. Ajax POST /login name=reuven&password=secretBrowser Server 200 OK <html>... <p>Thank you!</p> ...</html>
    117. 117. Ajax isn’t everything• What if I want a chat application, or something else that stays open?• What if I want to execute more than one JavaScript function at a time?• What if I want to store things locally?• HTML5 provides all this — and more!
    118. 118. Canvas• A complete drawing area, in your browser!• Use JavaScript to: • Draw arbitrary shapes • Detect the mouse • Detect the drawing• The end of Flash? Maybe...
    119. 119. Geolocation• Your browser can know where you are!• It can send this info to the server• It’s not perfect, but still pretty good• To avoid privacy issues, users are always asked if their location should be shared
    120. 120. Inter-page communication• Modern Web apps can span multiple pages• HTML5 makes it easy for two pages (from the same server) to communicate• The receiver knows which server sent the data — so it can filter incoming messages, as well as screen them for security
    121. 121. Web sockets• This is potentially the biggest deal of all• Ajax allows for server connections. But: • High overhead • Stateless• Web sockets have low overhead, and they stay open as long as you need!
    122. 122. Using Web sockets
    123. 123. Using Web socketsvar weatherSocket = newWebSocket("ws://localhost:8080");
    124. 124. Using Web socketsvar weatherSocket = newWebSocket("ws://localhost:8080");weatherSocket.onopen = function(e){ alert("Opened weather socket");};
    125. 125. Using Web socketsvar weatherSocket = newWebSocket("ws://localhost:8080");weatherSocket.onopen = function(e){ alert("Opened weather socket");};weatherSocket.onmessage =function(e) { alert("Got message: "+ e.data);};
    126. 126. Using Web socketsvar weatherSocket = newWebSocket("ws://localhost:8080");weatherSocket.onopen = function(e){ alert("Opened weather socket");};weatherSocket.onmessage =function(e) { alert("Got message: "+ e.data);};weatherSocket.onclose = function(e){ alert("Closing socket..."); };
    127. 127. What can sockets do?• Chat servers• Stock feeds• Teleconferencing• Who knows? • Remember, HTTP was only invented after sockets had been around for 15 years
    128. 128. Web workers• Execute more than one thing at a time• In other words:You can run JavaScript functions in the background • Process text • Open Web sockets • Perform calculations
    129. 129. Local storage• Now Web apps can store data• A little database of name-value pairs var foo = localStorage.getItem("bar"); localStorage.setItem("bar", foo);
    130. 130. Local storage• Now Web apps can store data• A little database of name-value pairs var foo = localStorage.getItem("bar"); localStorage.setItem("bar", foo); var foo = localStorage["bar"];
    131. 131. Local storage• Now Web apps can store data• A little database of name-value pairs var foo = localStorage.getItem("bar"); localStorage.setItem("bar", foo); var foo = localStorage["bar"]; localStorage["bar"] = foo;
    132. 132. Media• Standard (well, sort of) ways to play audio and video • No more Flash!• Problem: No one format is supported by all browsers
    133. 133. Rich client-side frameworks• Backbone• Ember
    134. 134. Design frameworks• Twitter bootstrap• Blueprint• Compass
    135. 135. Don’t forget mobile!• iOS and Android are growing massively• Web site vs. native app? • (Ask Jakob Nielsen — for now, apps are better, but that won’t last for long)• Ignore these users at your peril
    136. 136. Want a Web app?• It used to be: • “What operating system, language, and database will I use?”• Or: • “How can I produce an interesting Web site?”
    137. 137. Now it’s:• What experience do we want to give people?• What will they be using to access our system?
    138. 138. Those lead to a wide variety of questions:• What server language and framework? JavaScript framework? Hosted or cloud?• What type of database (relational, NoSQL)? Which one? Hosted or cloud?• Do we offer an API? A mobile app? Both?• Which HTML5 features do we want to use, and how do we gracefully degrade?
    139. 139. The key takeaway• Web sites are far more than just static text, blogs, or forums• They’re full-fledged software applications• Take advantage of these technologies, and you can create a fabulous experience• (Don’t take advantage of them, and your competitors will!)
    140. 140. Oh, yeah: Testing• Automated testing is amazing• Your Web site should use it• Most modern frameworks support some sort of testing — if not, change framework• Catch dumb bugs and issues before your customers do! • Faster and cheaper than people
    141. 141. My brain is too small!• Yes, there’s a lot to learn• Most of it can wait a little bit• There are oodles of tutorials and books that can help you• Besides a lot of this is still highly transitional
    142. 142. Whew!• There’s a lot to the modern Web• It’s fun and exciting, and continues to move forward at breakneck speed• Understanding as many of these parts as possible will help you make better decisions, and better applications!
    143. 143. Any questions?• Call me: 054-496-8405• E-mail me: reuven@lerner.co.il• Interrupt me: reuvenlerner (Skype/AIM)
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×