Download the PHP package sokil/frontend-bundle without Composer

Frontend Bundle

Single Page Application based on Backbone, Marionette and Twitter Bootstrap

• Installation
• Controller
  • Single Page Application
  • Application data
• Model
  • Handling json requests
• View
  • Template
  • Regions
  • Router
  • Service container
  • RequireJs
  • Frontend Components
    • Popup
    • List
    • MultiTypeahead

Installation

Add composer dependency:

Add bundle to AppKernel:

Build resources:

Bundle uses assetic so you need to register it in assetic config:

You can use DeployBundle to handle process of deployment static resources.

Controller

Single Page Application

We may configure pre-defined controller, responsible for rendering single page application, as service:

Or use your own controller:

See how to convigure spa in view SiteBundle:Spa:index.html.twig below in View section .

If some additional data required to be passed from backend to frontend, this may be done through Application data.

Application data

Application data may be used to pass some data from backend to frontend. Create service, responsible for obtaining application data from different sources:

Now pass name of this service to definition of your spa action:

Application data generated from number of providers. provider is a servise identified by tag frontend.spa.app_data_provider. Also app data service must be defined by key app_data, pointing to the instance of application data service.

Provider class must implement Sokil\FrontendBundle\Spa\ApplicationDataProviderInterface. It must implement one method getData() which return map of application parameters.

Model

Handling json requests

Backbone models send json requests.

To enable support, you may add FOSRestBundle, and configure serializer. app/AppKernel.php:

app/config/config.yml:

It you don't need whole bundle, just register listener, which converts json request to array:

View

Template

View renders Marionette 2 application and starts it. Bootstrap 3 used as UI framework. For adding some CSS and JS resorses on page, use macro from src/Resources/views/macro.html.twig:

Regions

Application refers to the root app.rootView view , which handles root element of the SPA application. Root element may be configured in app options or used default value body. Root element holds some regions where different functinnality rendered. Main contebnt renders to app.rootView.content region, and popup renders to app.rootView.popup region. You can pass your own regions and refers to them through app.rootView:

Router

Router is instance of Backbone.Router. Also you can use Marionette.AppRouter.

If you have few routes, you can pass them all in routers option:

To set default route, use option defaultRoute:

Service container

Container is a registry to build and get already built services. Service definition is just an object with methods to build service instances, where this refers to Container instance:

Definitions passed to container by serviceDefinitions configuration parameter:

Services then may be get from container:

RequireJs

Dependencies may be merged and passed to container:

Every config may math one or both path and shim parameters:

By default, Application already has pre-configured FrontendRequireJsConfig. It has some dependencies, e.g. Twitter Typeahead.

Frontend Components

Popup

Popups must extend PopupView:

List

This component allows to generate collection of models.

MultiTypeahead

Wraps ListView, and adds typeahead functionality to add new elements to list.