Copyright Clever Age 2009

Symfony Live 2010

An offline admin-generator with HTML5and Gears

2

Outline

1. Project introductionProject introduction

2. Offline applications in a nutshellOffline applications in a nutshell

3. Symfony plugin internalsSymfony plugin internals

4. DemoDemo

5. Cut the wire?Cut the wire?

Offline admin-generator for symfony

3

Me, myself & IMe, myself & I

4

Me, myself & I

Frontend (CSS, HTML, JS, mobile usages)Frontend (CSS, HTML, JS, mobile usages)

Backend (symfony, WordPress)Backend (symfony, WordPress)

Speaker @ Paris-WebSpeaker @ Paris-Web

Author @ Eyrolles − blogsAuthor @ Eyrolles − blogs

Co-chairman @ LSM 2010Co-chairman @ LSM 2010

And also, Gears userAnd also, Gears user

Thomas Parisot @ Clever Age

5

Project IntroductionProject Introduction

6

Project Introduction

Full JS Offline AppFull JS Offline App

7

Symfony … ?Symfony … ?

Project Introduction

8

Admin generators !Admin generators !

Project Introduction

9

The GoalThe Goal

Network-lessNetwork-lessbackendbackend

Project Introduction

10

11stst time time

Sf 1.2 + Propel +Sf 1.2 + Propel +GearsGears

Project Introduction

11

22ndnd time time

Sf 1.4 + Doctrine +Sf 1.4 + Doctrine +HTML5HTML5

Project Introduction

12

Offline in a nutshellOffline in a nutshell

13

Offline in a nutshell

LocalServerLocalServerDatabaseDatabase

WorkerPoolWorkerPool

GeolocationGeolocationDesktopDesktop

TimerTimerHttpRequestHttpRequest

14

Offline in a nutshell

Offline Web AppsOffline Web AppsWeb SQL DatabaseWeb SQL Database

Web WorkersWeb Workers

GeolocationGeolocationWeb StorageWeb Storage

File APIFile APIUser InteractionsUser Interactions

15

Offline in a nutshell

Online WorkflowOnline Workflow

16

Offline in a nutshell

Offline WorkflowOffline Workflow

17

Complicated!Complicated!

Offline in a nutshell

18

CleverOfflineAdminGeneratorPluginCleverOfflineAdminGeneratorPlugin

19

cleverOfflineAdminGeneratorPlugin

1. Application filterApplication filter

2. Dynamic filesDynamic files

3. Data storageData storage

4. Replay form submissionReplay form submission

Key points

20

Application FilterApplication Filter

cleverOfflineAdminGeneratorPlugin

21

Dynamic filesDynamic files

cleverOfflineAdminGeneratorPlugin

22

cleverOfflineAdminGeneratorPlugin

Data storageData storage

23

Replay formsReplay forms

cleverOfflineAdminGeneratorPlugin

24

Replay formsReplay forms

cleverOfflineAdminGeneratorPlugin

25

Demo TimeDemo Time

26

Cut the wire?Cut the wire?

27

TechnologicalTechnologicalPreviewPreview

(nothing's perfect, even the(nothing's perfect, even thetechnology)technology)

Cut the wire?

28

Cut the wire?

So, Gears or HTML5?So, Gears or HTML5?

29

Cut the wire?

1. CSRFCSRF

2. Password protected lifetime sessionPassword protected lifetime session

3. Few browsers have ALL HTML5 featuresFew browsers have ALL HTML5 features

4. Hook on every form while offline (even filters)Hook on every form while offline (even filters)

5. Unstable when symfony cache is ONUnstable when symfony cache is ON

6. Tied to default admin-gen themeTied to default admin-gen theme

Known problems

30

Cut the wire?

1. Fix bugs ;-)Fix bugs ;-)

2. Improve documentationImprove documentation

3. Store form method (GET, POST)Store form method (GET, POST)

4. Add lots of events for remote controlAdd lots of events for remote control

5. Provide API for modular usage (routing, forms)Provide API for modular usage (routing, forms)

6. jQuery agnosticjQuery agnostic

7. Process file submissionProcess file submission

8. I18n and moreI18n and more

Fight the Future

31

Questions?Questions?

Thanks!Thanks!

32

Credits

http://www.flickr.com/photos/the-jedi/4103189447/http://www.flickr.com/photos/the-jedi/4103189447/http://www.flickr.com/photos/richardholden/2147948913/http://www.flickr.com/photos/richardholden/2147948913/

http://www.flickr.com/photos/cayusa/981372736/http://www.flickr.com/photos/cayusa/981372736/http://www.flickr.com/photos/altuwa/3634870074/http://www.flickr.com/photos/altuwa/3634870074/

http://www.flickr.com/photos/thecaucas/2597813380/http://www.flickr.com/photos/thecaucas/2597813380/http://www.flickr.com/photos/ale2000/1275120868/http://www.flickr.com/photos/ale2000/1275120868/http://www.flickr.com/photos/max78/2208034262/http://www.flickr.com/photos/max78/2208034262/

http://www.flickr.com/photos/7933170@N03/652332630/http://www.flickr.com/photos/7933170@N03/652332630/http://www.flickr.com/photos/_fabrizio_/1578087736/http://www.flickr.com/photos/_fabrizio_/1578087736/

http://www.flickr.com/photos/voir66/2956613218/http://www.flickr.com/photos/voir66/2956613218/