BUILDING JS APPS ON TOP OF POPULAR CMSES

ALEXANDRA ANGHEL CTO and cofounder @ APPTICLES

What are Progressive Web Apps? (previously called Mobile Web Apps)

Progressive Web Apps “A new way to deliver amazing user

experiences on the web.”

https://developers.google.com/web/progressive-web-apps/

- Secure (HTTPS)

- Responsive on tablets &

mobile devices

- The start URL (at least) loads while offline

- Add to Home screen

- Loads fast

- Cross-browser (Chrome,

Edge, Firefox and Safari)

- Each page has a URL

MAIN FEATURES

Google Chrome Lighthouse

https://github.com/GoogleChrome/lighthouse

ex. PWA Score

Google Chrome Lighthouse

https://github.com/GoogleChrome/lighthouse

What We Had

- Sencha Touch legacy

- Bloated framework, very slow development

- Duplicate code

- Separate phones & tablets profiles

- Templates were not HTML

- Heavy production files

What We Wanted

- Multiple App Themes

- Similar features

- Same API

- Easily maintainable

What We Had

- Sencha Touch legacy

- Bloated framework, very slow development

- Duplicate code

- Separate phones & tablets profiles

- Templates were not HTML

- Heavy production files

Starter Kit Requirements

- Environment setup

- Structure

- Integrate with the API

- Global JSON config

- URL rewriting

- Customizable styling

- Build tasks

- Pre-commit hooks

- Tests

- Coding standards

- Documentation

Starter Kit

Environment setup

Structure

Integrate with the API

Global JSON config

URL rewriting

Customizable styling

Build tasks

Pre-commit hooks

Tests

Code quality

Documentation

John Papa’s style guide: Folders-by-Feature

Demo https://www.appticles.com/mobile-app-themes.html

Starter Kit

+

Challenges

- Lack of coding examples (ES6 + Angular 1)

- Can’t use $scope, $ionicScrollDelegate, etc. outside the constructor

Doesn’t work

Mneah…

Challenges

- Lack of coding examples (ES6 + Angular 1)

- Can’t use $scope, $ionicScrollDelegate, etc. outside the constructor

- Improve existing tests suites

- Can’t update core modules

- Not fully compatible with WordPress plugins (ex. forms, Visual Composer)

What’s Next

- Offline mode

- Push notifications

- React starter kit

- AngularJS 2 / Ionic 2 starter kit

- Drupal & Joomla plugins

THANK YOU

ALEXANDRA ANGHEL alexandra@appticles.com

/appticles/theme-obliq