Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Yesplan: 10 Years later

979 Aufrufe

Veröffentlicht am

Yesplan: 10 Years later
Presentation from PharoDays2019.

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

Yesplan: 10 Years later

  1. 1. 10 Years later “develop in Pharo, deploy in Gemstone” with Seaside Johan Brichau - johan@yesplan.be
  2. 2. Yesplan ? Web Application (SaaS) to manage an event venue
  3. 3. Yesplan ? Web Application (SaaS) to manage an event venue
  4. 4. Yesplan ? Web Application (SaaS) to manage an event venue
  5. 5. Yesplan ? Web Application (SaaS) to manage an event venue - jQuery - jQuery-UI - KnockoutJs - D3.js - Datatables - Jasper reports - ….
  6. 6. Yesplan ? Web Application (SaaS) to manage an event venue - jQuery - jQuery-UI - KnockoutJs - D3.js - Datatables - Jasper reports - …. ReactJs
  7. 7. Yesplan ? • Founded by aa. and arts centre • Over 200 customers (in BE, NL, Lux, CH, UK, NO, DK, FI) • Currently 25 employees: • 5 software engineers, 1 dev ops engineer, 1 interaction designer and 1 report engineer • sales, account management, marketing, support, • Emphasis on making an application that not only works, but also is enjoyable to use
  8. 8. Yesplan 0.1 (2009) • Yesplan calendar built using Seaside’s “full page rendering” • Standard ‘component calls component’ implementation • A lot of jQuery for animations and ajax updates • Javascript universe was “big mess” 
 (excluding notable exceptions) • More errors than functionality in most ‘plugins’ • Bad performance and horrible engineering • Pharo + GoodsDB in production title group in-place editing info bubbles group visualization
  9. 9. Yesplan 1.0 (2010) • Yesplan calendar with incremental ajax updates • A lot of jQuery-based scripts • SVG animations using generated Javascript • Develop in Pharo, deploy in GemStone • Pharo for development • GemStone for deployment • Unit tests + Seaside Component Tests
  10. 10. Yesplan 1.0 (2010) • Yesplan calendar with incremental ajax updates • A lot of jQuery-based scripts • SVG animations using generated Javascript • Develop in Pharo, deploy in GemStone • Pharo for development • GemStone for deployment • Unit tests + Seaside Component Tests seconds 0 1,5 3 4,5 6 1 commit after one change in 100 000 loaded objects Magma Goods Goods w/ manual barrier Gemstone 0,68s
  11. 11. Yesplan 1.x (2010-2013) • Seaside with a lot of Javascript generation • Separate Javascript source code files • jQuery event delegation • Parasol • Selenium (Webdriver) testing • Targeted at Seaside apps but not limited to html span class: 'name'; passenger: self; with: self visibleresourceUse event name. html jQuery this on: 'click' 
 selector: '.name' do: ((JSStream on: 'editEventName(event.target)') asFunction: #(event)) html document addLoadScript: ((((html jQuery expression: (JSStream on: 'target')) editable type: 'text'; callback: [ :val | nameValue value: val ]; secondCallback: (html jQuery ajax callback:[:theCells | theCell value changeEventName: nameValue value]] passengers: ((html jQuery expression: (JSStream on: 'target'))); script: [:s | s<< (theCell value afterNameUpdateScriptOn: s)]); yourself) asFunction: #(target)) assignTo: 'editEventName').
  12. 12. Yesplan 1.x (2010-2013)
  13. 13. Yesplan 1.x (2010-2013)
  14. 14. Yesplan 1.x (2010-2013)
  15. 15. Yesplan 1.x (2010-2013)
  16. 16. Yesplan 1.x (2010-2013)
  17. 17. Yesplan (2014-2015) • Experiment with Hybrid Web Application • Server-side session: Seaside • Client-side UI: d3js, KnockoutJs, BackboneJs,…
  18. 18. Yesplan (2014-2015) • Experiment with Hybrid Web Application • Server-side session: Seaside • Client-side UI: d3js, KnockoutJs, BackboneJs,…
  19. 19. Yesplan (2014-2015) • Experiment with Hybrid Web Application • Server-side session: Seaside • Client-side UI: d3js, KnockoutJs, BackboneJs,…
  20. 20. Yesplan (today) • Full Hybrid Web Application • Server-side session mgmt: Seaside • Existing UI: server-side Seaside • New UI: client-side ReactJs • Operations • SmalltalkCI (Travis-CI), parallel running test packages • Sentry central error logging (Js + Smalltalk) • Numbers • +200 Gemstone databases • +2000 simultaneous sessions
  21. 21. Client Server Data objects Operations Web components generated
  22. 22. Client Server Data objects Operations Web components generated REST API Reporting engine Mobile Portal rich client application
  23. 23. <html> … <body> …. <script> … </script> </body> </html> Seaside-based ReactJs
  24. 24. <html> … <body> …. <script> … </script> </body> </html> Seaside-based ReactJs
  25. 25. Develop in Pharo, deploy in Gemstone • Key Tools • Grease • Metacello • https://github.com/GsDevKit/ • Pros • Seaside in GsDevKit • “Transparent” persistency • Licensing model • Gemstone performance, Pharo coolness • NO ORM • Live debugging of production environment • Cons • Dialect differences only become larger • Pharo-specific classes • “Transparent” persistency
  26. 26. Legend defaultscheduledescription : string defaultschedulestarttime : datetime defaultscheduleendtime : datetime (or null) attributes : attributedictionary Event Group vipcode : string (or null) firstname : string lastname : string addresslines : string (or null) zipcode : string (or null) country : string (or null) city : string (or null) Person vat : string (or null) type : string (or null) Organization jobtitle : string department: string (or null) Link duration : duration Task Task Group name : string statustypes : string[0…n] backgroundcolor : color textcolor : color Status name : string color : color Profile Attachment List defaultstartidx : integer defaultstopidx : integer Event Schedule number : integer role : string (or null) Abstract Resourcebooking Event History List type : string value : string Contactinfo description : string starttime : datetime Schedule entry Custom data group time : datetime user : string description : string History entry locations[0…n] profile status links[0…n] links[0…n] contactinfo[0…n] profiles[0…n] entries[0…n] schedule originalname : string type : string comment : string date : date user : string url : string Attachment attachments[0…n] Event Resource Booking List resourcebookings [0…n] Event Task List tasks[0…n] _type : string comment : string (or null) address : string (or null) labels : string[0…n] name : string attributes : attributedictionary Contact status : string name : string team : string cost : decimal due : datetime start : datetime assignedby : string assignedto : string description : string Abstract Task tasks[0…n] name : string starttime : datetime endtime : datetime isproduction : boolean Abstract Event tasks attachments name : string keyword : string Custom data item type : string value : string|integer|decimal|date|time|datetime| resourcebooking | contactbooking (or null) Custom data element children[0…n] customdata resource customdata groups[0…n] organization person Event Contact Booking List role : string Event Contact Booking contactsbookings[0…n] contactbookings contact Custom data List customdata customdata customdata actualnumber: integer [opt.] Resourcesetbooking children[0…n] Yesplan API v1.0.1 - 12 April 2013 production (or null) group (or null) recurrence startdate : date rule : (recurrence rule) Recurrence children[0…n] history Event custom data Listevent event entries[0…n] event Contactbooking custom data List Contact custom data Listcontact contactbooking event costings[1..n] alteration : string (or null) cost: decimal (or null) price : decimal (or null) netprice : decimal (or null) vat: decimal (or null) actualprice : decimal (or null) Event Costings costing group: string alteration : string (or null) cost : decimal (or null) price : decimal (or null) vat: decimal (or null) actualprice : decimal (or null) Resourcegroup costing event costings[1…n] alteration : string (or null) cost : decimal (or null) price : decimal (or null) actualprice : decimal (or null) invoice : boolean accountableto: string Resourcebooking costing resourcecostings[1…n] costmodel event Resource SetLocation notation : string type : string rates : integer[2][1…n] Discount name : string account : string (or null) purchaseprice : decimal invoice : boolean cost : string (cost formula) (1 or array) price : string (cost formula) (1 or array) vat : decimal Cost model costmodels[0…n] durationdiscount amount : integer Resource resources[0…n] volumediscount resourcetype : string name : string group : string roles : string[0…n] description : string external : boolean rented : boolean Abstract Resource Placeholder Resource custom data List resource ResourceSetbooking costing children[1…n] repeatedevents [1…n] Resourcebooking custom data List resourcebooking Resourcebooking actualnumber: integer [opt.] actualstart: datetime [opt.] actualend: datetime [opt.] Resourcebookinggroup children[0…n] start : datetime end : datetime actualstart: datetime actualend: datetime Singleton Resourcebooking start : datetime end : datetime actualstart: datetime [opt.] actualend: datetime [opt.] actualnumber: integer [opt.] Standard Resourcebooking repeatedevent reference link (retrieve needs separate call/request) nesting link (entity directly included) subtype schedule Group Schedule schedules[1…n] ??? Abstract Schedule Summary Group Schedule Summary Event Schedule Summary group group entries[0…n]
  27. 27. Develop in Pharo: GT !
  28. 28. Develop in Pharo: GT !
  29. 29. Thank you! Johan Brichau johan@inceptive.be johan@yesplan.be

×