How we built ILoveTechno. Coders: Amphion, Krimson, Pronovix

1. Saturday, December 12, 2009

2. Saturday, December 12, 2009

3. Saturday, December 12, 2009

4. • Amphion - Flash development - Antwerp
• frontend, content management, client
contact, design
• Krimson - Drupal specialist - Antwerp
• project management, architecture
supervision, theming, server related
• Pronovix - Drupal specialist - Belgium/Hungary
• special Drupal projects, backend / service
architecture, technical help
Saturday, December 12, 2009

5. About us
• Peter Arato • Jo Wouters
(user/428960) (user/8777)
• Hungary • Belgium
• Pronovix • Krimson | Drupal Architects
• Drupal, Flash, Tech • Project management,
Consultancy, Training,
Development
Saturday, December 12, 2009

6. About ILoveTechno
• http://www.ilovetechno.be/
• 1995 .. 2009 ...
• Techno festival
• Informational site
• Aggregator site
Saturday, December 12, 2009

7. Saturday, December 12, 2009

8. Saturday, December 12, 2009

9. Saturday, December 12, 2009

10. Saturday, December 12, 2009

11. Co-operation
• Communication
• Motivation
• Well shared tasks
• Iterative development (prototyping)
Saturday, December 12, 2009

12. Requirements
Saturday, December 12, 2009

13. Music player
Saturday, December 12, 2009

14. Saturday, December 12, 2009

15. Flash objects
Saturday, December 12, 2009

16. Saturday, December 12, 2009

17. Lineup editor
Saturday, December 12, 2009

18. Saturday, December 12, 2009

19. Different page
elements
Saturday, December 12, 2009

20. Saturday, December 12, 2009

21. Aggregation
Saturday, December 12, 2009

22. Saturday, December 12, 2009

23. ... bunch of general
Drupal stuff
Saturday, December 12, 2009

24. Features
• Druplash
• Deeplinking
• Dynamic content loading
• Graceful degradation
• XML-RPC content pulling
• ... other interesting stuff
Saturday, December 12, 2009

25. Druplash
• Flash (frontend)
• Drupal (backend + content + layout)
• Communication (client, server)
• Different implementations
• SWFAddress (SWFObject), Services,
AMFPHP
Saturday, December 12, 2009

26. Deeplinking
• Persistent URL
• History
• SWFAddress
Saturday, December 12, 2009

27. ActionScript
Saturday, December 12, 2009

28. JavaScript
Saturday, December 12, 2009

29. 1st page load
• Loading original content (example.com/news)
• Redirect to $basePath (example.com/#/news)
• Loading content of the given URL (Ajax)
• Replace content with Flash
• Notify Flash about the state (news)
• Flash changes it’s state
Saturday, December 12, 2009

30. Navigation
• Send request for a page (about_us)
• Flash notifies SWFAddress (Flash > JS)
• SWFAddress state changed
(example.com/#/about_us)
• Ajax request to the server (Ajax)
• Content elements received (JSON)
• Put content to the right place
Saturday, December 12, 2009

31. Dynamic elements
• Ajax request
• Content
• CSS
• JavaScript (evaluation)
• AjaxLoad
Saturday, December 12, 2009

32. Saturday, December 12, 2009

33. PHP
Saturday, December 12, 2009

34. JavaScript
Saturday, December 12, 2009

35. Graceful
degradation
• Browsers without FlashPlayer / JS
• Deprecated FlashPlayer version
• SWFAddress (SWFObject)
Saturday, December 12, 2009

36. Saturday, December 12, 2009

37. Communication
Saturday, December 12, 2009

38. Flash <> Client
return call
Flash
HTML
call return
Saturday, December 12, 2009

39. ActionScript
JavaScript
Saturday, December 12, 2009

40. Flash <> Server
01000100010
00100101010 11010100 $nid = 1; $a = [...
11010111010
AMFPHP gateway
Client SERVER
01000100010
00100101010 11010100 $node = {“title”: ...
11010111010
Saturday, December 12, 2009

41. ActionScript
Saturday, December 12, 2009

42. Numbers
• Event sold out: 35.000 tickets!
• 42.000 unique visitors in 2 days
• 65.000 visits in 2 days
• > 420.000 unique visitors
• > 580.000 visits
• > 8.000.000 page views
Saturday, December 12, 2009