1.
Global Business App (PWA)
keeping 5,700 people in sync with Javascript
by Ralf Schwoebel (@orgaralf)
10:09

2.
Housekeeping
• Nice to meet you! I am Ralf: rs@orga.zone - founder,
employer, investor, coder, member of BJDW
• We will talk about a live, working project with 5.700+ users
in 24+ languages
• I need new photos for the website: Please email or tweet
to @orgaralf, if you take a nice pic!
10:09

3.
What to expect in 40 slides
• We talk about a „customized project“, which spawned 2 children
already. We will talk about the mothership and some things are
under NDA
• App = Frontend + Backend + Processes
• #biz, #php, #js JS PHP
biz
10:09

4.
#biz – The requirements
• Global outlets of car manufacturer (5700+ outlets)
• 2 parts for users (aka engineers):
• What is there, what needs to be installed (Survey)?
• What was installed, where (Report)?
• Administration for customer & partner
• Handle infos, create site handbook (Word)
• Add and remove users, hardware
• Budget: limited!
10:09

5.
#biz – The idea
CentOS7, PHP7, MariaDB10.2
Apache2.4, Sphinx, PHPOffice,
LibreOffice (Word 2 PDF, unoconv)
API
AngularJS App PHP Backoffice
10:09

6.
#biz – The result
• Detailed work descriptions
• Work documentation
• Localized
• Word & PDF generation
10:09

7.
#biz – The features
Backoffice
• Import XLS
• Edit Outlets, Users, Details
• Set Default Values (like available
hardware)
• Create Word Doc
• Export Statistics
• LIVE
App
• Work offline
• Add X images, free text
• 24+ languages
• Sync on-demand
• never loose data
• Any (newer) device, any (modern)
browser
10:09

8.
#biz – The plan
Team of 3 on our side: Admin / PHP / JS, +2 from Hemmersbach
1. Planning Document with HTML Dummy (20% of total)
2. Server setup with LAMP + tools + replication
3. Backoffice Development (up to alpha release)
4. HTML Dummy > convert to AngularJS pages
5. Test run & Bugfixes (iterate 5-15x)
6. Release
10:09

9.
#biz – The plan
At the end:
A Word Doc
with 120+ pages,
detailling the flow,
server details and
basic infos on the
process &
30+ (static) HTML
Pages
10:09

10.
#biz – tools and services
• CentOS7 servers with Hetzner (2x), LAMP
MariaDB 10.2 replication (Master<>Master), lsyncd (Master>Slave)
• Cloudflare Web-Termination
• Development Server on CentOS7, LAMP + SVN
Subversion for a team of 3, same install like above
• 2 x Macbooks, 1 Windows Laptop
4 Android Tablets, 2 iPads, 3 iPhones, 2 Android Phones
PHPStorm as IDE, browserstack.com to test.
10:09

11.
#biz – 3 take aways
1. Solid Plan: it will take real effort to create it and it will cover
less than 70% of what you will do.
2. Development Setup & Servers must be clean.
3. Subversion or git: a necessity!
10:09

12.
PHP – and the backend
10:09

13.
PHP – and the backend
Internal approach: Finish the backend first!
10:09

14.
PHP – and the backend

15.
PHP – and the backend
• PHPStorm: SVN to dev-Box (CentOS7) and auto-checkout
• All files in SVN
• Dummy data in local DB, manually entered (JSON),
MariaDB 10.2 ("select ... where JSON_VALUE(OZAPPDATA,'$.LOCATION')=" . ($loc) )
• API set of basic functions (insert, update, delete, search, see
docs.orga.zone)
• rsync script for dev > staging releases
10:09

16.
PHP – and the backend

17.
PHP – tough decisions
• What is needed on AngularJS side vs. the server?
• Framework or not? We decided: not!
• MVC is a good idea!

18.
PHP – Backend & Users
You have to filter & check all user input:
if(strlen($arrOutletData["oNotes"])>2)
$cell2->addText(cleanWordText($arrOutletData["oNotes"]));
eg: PHPOffice is not happy with unescaped:
& < >
but is totally cool with
神戸中央
10:09

19.
PHP (& backend) – 3 take aways
1. Server configuration with all the tools and libs takes
longer than you think!
2. Users will input every possible character in the
UTF8 range
3. A clean structure (group functions/methods by topic)
saves the day
10:09

20.
– and the frontendJS
Let‘s talk App & AngularJS
10:09

21.
– and the frontendJS
Splitting into 2 states: off- and online:
Online:
• Download the outlet & default values
• Sync the results up
Offline:
• Go through questions, add images, edit data (50+ MB)
• Catch faulty syncs and input
10:09

22.
– and the frontendJS

23.
– and the frontendJS
• After download of dataset: App has to work offline
10:09

24.
– and the frontendJS
After download of dataset, the App has to work offline... so:
Service workers
or
Manifest (aka appcache)
10:09

25.
– and the frontendJS
10:09

26.
– and the frontendJS

27.
– and the frontendJS
• Manifest it is!

28.
– and the frontendJS
• 80+ files in Manifest: could combine, but due to (15-20)
releases of bug fixes we did not – but you should!
10:09

29.
– and the frontendJS
• 3rd Party Code and AngularJS 1.6
10:09

30.
– and the frontendJS
• Key for data storage: dexie.js
10:09

31.
– AngularJS data bindingsJS
• Image > Data > DB > Server
10:09

32.
– and the frontendJS
• Key for data storage: dexie.js
10:09

33.
– Promises, promisesJS
10:09

34.
– Promises, promisesJS
if(confirm($translate.instant('MESSAGE.OVERWRITE'))) {
modal = modalService.openModal('download', 'lg');
return modal.opened.then(function(){
return $q.when(dexieService.resetOutlet(outlet));
});
}
10:09

35.
– AngularJS, Photo and DB...JS
• Trigger Service Example
10:09

36.
– and the frontendJS
• Key for server communication: orga.js
10:09

37.
– and the frontendJS
• Key for server communication: orga.js
10:09

38.
– AngularJS data bindingsJS
• Dynamic pages on dynamic data
10:09

39.
– AngularJS : no problem, but...JS
10:09

40.
– AngularJS : no problem, but...JS
• In retrospetive: no (real) problems in coding it
• Synchronization can be tricky with 30 images (= 80+ MB data)
and thin uplink speeds
• Browser settings („BYOD“): privacy mode, storage limits
10:09

41.
– 3 take awaysJS
• A „Progressive Web App“ works currently (2017)
best, if you use the manifest technique (which is
deprecated and a real hassle)
• Promises and data bindings will demand the best of
you!
• Frontend Tools: there are plenty for enterprise-ready
deployment you can (re-)use
10:09

42.
10:09

43.
Summary
We promote Javascript in:
• Multi-Device environments (aka modern Browsers)
• Uncertain states of connection
• JSON exchanges with the backend (we used PHP, but you should use
what you know best)
• Budget tight projects because of the free tools around
10:09

44.
Thank you!
Thank you for your time and attention...
Have a great conference! Next:
• 18:15 - 19:00 EXPO RECEPTION
• 19:00 – Casino Night and Talks
Ralf Schwoebel, CEO
orga.zone AG
rs@orga.zone
https://orga.zone/
10:09