Pushbots

Frontend Stack

Agenda

  • Legacy stack
  • Integrating a UI framework (MPA)(Current)
  • Building a full SPA (Current)
  • Scaling SPA  

Legacy Stack

Laravel + jQuery

https://github.com/pushbots/frontend/blob/master/resources/views/application/push_old.blade.php

View

https://github.com/pushbots/frontend/blob/master/resources/assets/legacy/js/dashboard/app.js

AJAX and JS Logic

Problems

  • Hard to maintain the code
  • Hard to add new features
  • Hard to test
  • bundle size is big
  • no real frontend dev ​environment

Solution one

Organize the code into small components (files) 

// composer/what.blade.php

// extend composer layout
@extends('layouts.dashboard.composer')

// adding styles
@section('styles')
  <link href="composer/what.css" rel="stylesheet">
@stop

// html content
@section('content')
    <div class="composer__what">
        ....... 
    </div>
@stop


// adding js logic
@section('scripts')
  <script src="composer/what.js"></script>
@stop

Solution Two

Do the same but with a frontend framework

Multi page app with react

Server-side routing and page-shell

// laravel route 
Route::get('push/{id}', ['as' => 'app.push', 'uses' => 'ApplicationController@push']);

// blade view (page shell)
@extends('layouts.app_dashboard')
@section('content')
<script>
var pageData = {!! json_encode($data) !!}
</script>
<div id="composer" data-app-id="{{$data['app']['_id']}}">

</div>
@stop


//js code to load composer code

const composer = document.getElementById("composer");
if (typeof composer !== "undefined" && composer !== null) {
  const Composer = Loadable({
    loader: () =>
      import(/* webpackChunkName: "/js/composer" */ "./Pages/Composer/index.jsx"),
    loading: ComposerPlaceHolder
  });
  render(<Composer />, composer);
}

Benefits

  • Progressive migration for code base
  • Adding new feature while migration is easy

Problems

  • No shared state
  • Loading all common asset on each page (react/redux/etc)
  • No direct way to share a component between all pages (Account settings modal)

Text

SPA

  • A separation between the backend and frontend
  • Focus only on frontend development
  • One state for all apps
  • Full Client-side UI routing
  • Easy to scale and add a new feature
  • Code splitting per route/component
  • No style issues (jss)
  • Easy to testing UI component (jest)
  • Shared component and helpers
  • Small bundle size 
  • Easy to upgrade and scale 
  • Custom build system with webpack
  • Best react and frontend practices 

Current Frontend stack

React (UI Components)

JSS (Styling solution)

Redux (State management)

React Router (UI Routing)

React loadable (Lazy load/code splitting)

Material (UI Components)

Formik/Yup (UI Validation)

Axios (Http Client)

Jest (Unit testing)

Cypress (E2E testing)

 Webpack/npm scripts (Build system)

and more on demand

Code overview

NEXT

Separate API and Frontend Servers

  • Decoupling backend and frontend development
  • Scale them differently
  • Server-side rendering for react 
  • Fast build times 

 

Decouple logic from UI (SDKs)

  • Easy to change entire UI layer if we need
  • DRY coding for any new projects
  • Easy to test logic separate from UI

 

A/B Testing / Addon based App

  • Enable/Disable Dashboard feature based on conditions for a specific segment of users

Practices

  1. Read and understand the business
  2. Search/discuss an implementation 
  3. Prototype the features
  4. Follow project structure
  5. Organize and solidify your code
  6. Add test ids for UI testing
  7. Test your components/utils 
  8. Document your code
  9. Extract potential common components
  10. Document the concept and usage on https://www.nuclino.com/
  11. Share what you ​learned with us 

Steps to add a new feature

  1. Read and understand the business
  2. Search/discuss an implementation 
  3. Prototype the features
  4. Follow project structure
  5. Organize and solidify your code
  6. Add test ids for UI testing
  7. Test your components/utils 
  8. Document your code
  9. Extract potential common components
  10. Document the concept and usage on https://www.nuclino.com/
  11. Share what you ​learned with us 

Steps to add a new feature

  1. Create a pull request on github
  2. Add 2 reviews
  3. CircleCI will run e2e tests
  4. Fix failed tests if found
  5. Resolve reviews/confilicts
  6. Push your Code
  7. All green

Per review​

  1. Research and business (amr)
  2. API Implementation (Abdallah/omr)
  3. SDKs Implementation (abdallah)
  4. Dashboard implementation (Salama,Hassan,Bassel)
  5. Testing (Amal)
  6. Live
  7. Marketing (amr/sayed/abdelrahman)
  8. Enhance/analyze(Moatasm)

Feature Shipping

Questions