My presentation from the International Javascript Conference in Munich, October 2017. It shows how we have setup a development environment for a team of 5, created backoffice functionality and finally the frontend with AngularJS. It is a working app, in use with over 5,700 local outlets and was reproduced for other customers now. It is a hands-on solution that solves decentralized data gathering with smartphones and tablets.

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