SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
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.
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
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
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
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
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
0 likes
Be the first to like this
Views
Total views
2,294
On SlideShare
0
From Embeds
0
Number of Embeds
1,318
You have now unlocked unlimited access to 20M+ documents!
Unlimited Reading
Learn faster and smarter from top experts
Unlimited Downloading
Download to take your learnings offline and on the go
You also get free access to Scribd!
Instant access to millions of ebooks, audiobooks, magazines, podcasts and more.
Read and listen offline with any device.
Free access to premium services like Tuneln, Mubi and more.