Modern web applications: HTML5, KnockoutJS, Web Sockets, socket.IO, NodeJS

1. Developing modern web applications
HTML 5, MVVM, Web Sockets
Mihai Tătăran
Microsoft MVP | Windows Azure, Azure Insider
General Manager, Avaelgo
Mihai.tataran@avaelgo.ro
Twitter: mihai_tataran

2. About me
• Owner, General Manager – Avaelgo, Timişoara
– Custom software development
– Consulting / training
– Microsoft Cloud SME of the Month in Europe
– Case study about a solution on Azure - Microsoft .com
website
• Microsoft MVP on Azure; Azure Insider, Certified
Professional
• Speaker / staff at major events:
ITCamp, DevReach, TechEd
• .NET community: www.codecamp.ro
http://itcamp.ro

3. Objectives
• Modern Web Apps
• New web servers

4. I. Modern web apps

5. Fast, single page, non-blocking, many
concurrent users

6. Javascript code
Smart communication protocols
Scalable and fast web servers

7. Knockoutjs
• MVVM pattern
• Two way data-binding
• What Ajax 4.0 tried to be some years ago
• Or jQuery UI Client Templates
• Library available in NuGet

8. Spaghetti code -> Ravioli code

9. Client-server communication today(*)
• Ajax
• Polling
• Long polling (xhr-polling)
• Flash
• All based on HTTP / proprietary
(*) maybe…

10. Web Sockets
Full duplex
Persistent connection over TCP

11. Socket.io
WebSockets or fallback
WebSocket
Adobe® Flash® Socket
AJAX long polling
AJAX multipart streaming
Forever Iframe
JSONP Polling

12. DEMO 1:
knockoutjs, socket.io, node, node
and azure

13. II. New web servers

14. What we do on web servers?

15. Get files (HDD I/O)
Call databases
Wait for a web service
Get data from cache

16. I/O

17. I/O latency
• L1: 3 cycles
• L2: 14 cycles
• RAM: 250 cycles
• DISK: 41,000,000 cycles
• NETWORK: 240,000,000 cycles

18. Traditional web servers (Apache, IIS)
Multithreading
1 thread per connection (request)

19. var result = db.query("select..");
// use result
VS
db.query("select..", function (result) {
// use result
});

20. Shift
• Cultural Bias
– We learn programming by executing code
instruction after instruction
– Async / anonymous calls – too complicated
– Is GOTO telling you anything?

21. Shift
• Infrastructure
– non-blocking I/O is not very present in traditional
frameworks / libraries
– Async file not available in POSIX
– Some Database access frameworks / libraries
don’t implement async patterns

22. Event-based, callbacks, non blocking
I/O web servers (node.js)
Massive scale

24. DEMO 2: node performance

25. Resources
• http://knockoutjs.com/
• http://datatracker.ietf.org/doc/rfc6455/?inclu
de_text=1
• http://socket.io/
• http://nodejs.org/

26. Q&A

27. Windows 8 Dev Camp
9:15-9:30 Sosirea participanților
9:30-10:20 What's new in Windows 8?
Tudor Damian
10:30-11:20 Developing modern web applications: HTML 5, MVVM, Web Sockets
Mihai Tătăran
11:30-12:20 Designing Windows 8 Apps with Blend and PowerPoint Storyboards
Lorant Domokos
12:20-13:00 Pauza de masa
13:00-14:20 Building and testing Windows 8 Metro Style Applications using C++,C# and
JavaScript
Radu Vunvulea
14:30-15:10 Integrating the Windows 8 Experience with Contracts
Tiberiu Covaci