0
jWebSocket-1.0
Real-time coding with jWebSocket
Real-time coding with jWebSocket
About us
* Alexander Schulze
→ jWebSocket Founder
→ a.schulze@innotrade.de
→ http://jwebs...
Topics
Introduction to jWebSocket
Application development concept
Sencha Touch && Ext JS integration
jQuery && jQueryMobil...
Status of Web Communication
* HTTP Protocol
→ Designed for document transmission
→ Cumbersome, nearly real-time tricks
→ P...
WebSockets - Technology
* WebSocket Protocol
→ Permanent TCP connections,
bidirectional, full-duplex
→ 4oo times less over...
WebSockets - Technology
* WebSocket Protocol
→ No Rules for Content
→ Text/Binary Frames, Chunking/Compression
→ Encryptio...
WebSocket vs HTTP
You should use
WebSocket here!!!
→ quicker
→ cheaper
→ more portable
Real-time coding with jWebSocket sl...
jWebSocket - Tokens Abstraction
→ Endpoints are stupid
→ Common language to
understand messages
→ Dataformats
* JSON, XML ...
jWebSocket Client Side
Real-time coding with jWebSocket slide 9 of 23
jWebSocket Client Side
Real-time coding with jWebSocket slide 10 of 23
jWebSocket Client Side / JavaScript
* Lightweight
* WebSocket Object Oriented JavaScript
framework
* WebSocket events flow...
jWebSocket Client Side / Integration PlugIns
Real-time coding with jWebSocket slide 12 of 23
jWebSocket Client Side / jQuery Integration
$.jws
- fTokenClient: jWebSocketTokenClient
+open():void
+send(aNS, aType, aAr...
jWebSocket Client Side / Sencha Integration
Ext.jws.Client
- fTokenClient: jWebSocketTokenClient
+open():void
+send(aNS, a...
jWebSocket Client Side / Sencha Data Package
Real-time coding with jWebSocket slide 15 of 23
jWebSocket Client Side / Ext JS Integration
Real-time coding with jWebSocket slide 16 of 23
jWebSocket Client Side / Sencha Touch Integration
Real-time coding with jWebSocket slide 17 of 23
jWebSocket 1.0 mobile web development strategy
Application development concept
jQueryMobile Sencha Touch
➔ Complete integr...
Creating our first application
The Admin Client application will manage all the
information of the jWebSocket users. This ...
First application: Sencha Touch User CRUD
Live coding session, Sencha Touch-jWebSocket
* Include jWebSocketSenchaPlugIn
* ...
slide 21 of 23
First application: jQueryMobile User CRUD
Download the required libraries
→ jQuery 1.9.1-min
→ jquery.mobil...
Live coding session, jQueryMobile-jWebSocket
First application: jQueryMobile User CRUD
* Include the requirements
* Connec...
Questions, suggestions,...?
Thank you for attention!
Learn more: http://jwebsocket.org, @jWebSocket
a.schulze@innotrade.de...
Upcoming SlideShare
Loading in...5
×

Real time coding with jWebSocket

742

Published on

Conference at MDC 2013 Nurnberg, Sencha Touch && jQueryMobile

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
742
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Real time coding with jWebSocket"

  1. 1. jWebSocket-1.0 Real-time coding with jWebSocket
  2. 2. Real-time coding with jWebSocket About us * Alexander Schulze → jWebSocket Founder → a.schulze@innotrade.de → http://jwebsocket.org → @jWebSocket * Victor Antonio Barzana Crespo → jWebSocket Web Developer → vbarzana@jwebsocket.org → @vbarzana slide 2 of 23
  3. 3. Topics Introduction to jWebSocket Application development concept Sencha Touch && Ext JS integration jQuery && jQueryMobile integration Live coding Real-time coding with jWebSocket slide 3 of 23
  4. 4. Status of Web Communication * HTTP Protocol → Designed for document transmission → Cumbersome, nearly real-time tricks → Polling, Long-Polling → Reverse-AJAX, Comet etc. → Ultimately non-standardized hacks → Remains a Request/Response mechanism Real-time coding with jWebSocket slide 4 of 23
  5. 5. WebSockets - Technology * WebSocket Protocol → Permanent TCP connections, bidirectional, full-duplex → 4oo times less overhead → ⅓ of latency → Standardized in HTML5 by W3C and IETF → protects investments → Single TCP Port → saves 50% server resources Real-time coding with jWebSocket slide 5 of 23
  6. 6. WebSockets - Technology * WebSocket Protocol → No Rules for Content → Text/Binary Frames, Chunking/Compression → Encryption (SSL/TLS) → No Limits for Formats/Sub-Protocols → protects investments → No Restrictions for Processing → Responsible for Logic, Security Real-time coding with jWebSocket slide 6 of 23
  7. 7. WebSocket vs HTTP You should use WebSocket here!!! → quicker → cheaper → more portable Real-time coding with jWebSocket slide 7 of 23
  8. 8. jWebSocket - Tokens Abstraction → Endpoints are stupid → Common language to understand messages → Dataformats * JSON, XML or CSV Solution: → Abstract Data Objects, in jWebSocket Token Endpoint Endpoint Browser Native client STOMP JMS WebSocket WebSocket csv JSON JSON XML jWebSocket EnginesJMS Gateway csv JSON JSON XML Message Abstraction Layer (Token-Processors, extendable) Token Message Security Layer (Token-Filters, extendable) jWebSocket Core App App App Plug-in Plug-in Plug-in Real-time coding with jWebSocket slide 8 of 23
  9. 9. jWebSocket Client Side Real-time coding with jWebSocket slide 9 of 23
  10. 10. jWebSocket Client Side Real-time coding with jWebSocket slide 10 of 23
  11. 11. jWebSocket Client Side / JavaScript * Lightweight * WebSocket Object Oriented JavaScript framework * WebSocket events flow * Support for all browsers * Integrable with any JS Technology Some characteristics jWebSocket.js Real-time coding with jWebSocket slide 11 of 23
  12. 12. jWebSocket Client Side / Integration PlugIns Real-time coding with jWebSocket slide 12 of 23
  13. 13. jWebSocket Client Side / jQuery Integration $.jws - fTokenClient: jWebSocketTokenClient +open():void +send(aNS, aType, aArgs, aCallbacks,...): void +close():void +processToken(aToken):void +getConnection():jWebSocketTokenClient +isConnected():Boolean +addPlugIn(aPlugIn: Object):void jWebSocketJQuery PlugIn-1.0 Real-time coding with jWebSocket slide 13 of 23
  14. 14. jWebSocket Client Side / Sencha Integration Ext.jws.Client - fTokenClient: jWebSocketTokenClient +open():void +send(aNS, aType, aArgs, aCbs, aScope): void +close():void +processToken(aToken):void +getConnection():jWebSocketTokenClient +isConnected():Boolean +addPlugIn(aPlugIn: Object):void jWebSocketSencha PlugIn-1.0 Real-time coding with jWebSocket slide 14 of 23
  15. 15. jWebSocket Client Side / Sencha Data Package Real-time coding with jWebSocket slide 15 of 23
  16. 16. jWebSocket Client Side / Ext JS Integration Real-time coding with jWebSocket slide 16 of 23
  17. 17. jWebSocket Client Side / Sencha Touch Integration Real-time coding with jWebSocket slide 17 of 23
  18. 18. jWebSocket 1.0 mobile web development strategy Application development concept jQueryMobile Sencha Touch ➔ Complete integration plug-in ➔ JavaScriptMVC + Models based in jWebSocket ➔ Load jQueryMobile pages with EJS template engine ➔ jWebSocket reached a complete integration with Sencha ➔ Create comprehensible applications for any kind of user ➔ New communication mechanism for Sencha Touch && Ext JS slide 18 of 23 Applications can be totally generated from command line
  19. 19. Creating our first application The Admin Client application will manage all the information of the jWebSocket users. This module will be accessible only by administrator users. * Administrator  Login/Logout  List all users  Add user  Remove user  Edit user Use case: Requirements: Real-time coding with jWebSocket slide 19 of 23
  20. 20. First application: Sencha Touch User CRUD Live coding session, Sencha Touch-jWebSocket * Include jWebSocketSenchaPlugIn * jWebSocket listeners * Connect/Disconnect * Login/Logout (Keep logged in using the session) * Ext.jws.Proxy * Form submit * Server notifications Real-time coding with jWebSocket slide 20 of 23
  21. 21. slide 21 of 23 First application: jQueryMobile User CRUD Download the required libraries → jQuery 1.9.1-min → jquery.mobile-1.3.1-min → Personalize the download of jQueryMX → Download StealJS to manage application dependencies ./steal/js steal/generate/app jwsUserCrud Generating the app from the command line Real-time coding with jWebSocket slide 21 of 23
  22. 22. Live coding session, jQueryMobile-jWebSocket First application: jQueryMobile User CRUD * Include the requirements * Connect/Disconnect * jWebSocket listeners * Login/Logout (Keep logged in using the session) * jWebSocket Models - save - findAll - destroy - update * Submit forms Real-time coding with jWebSocket slide 22 of 23
  23. 23. Questions, suggestions,...? Thank you for attention! Learn more: http://jwebsocket.org, @jWebSocket a.schulze@innotrade.de, vbarzana@jwebsocket.org
  1. A particular slide catching your eye?

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

×