The Wix PHP Application Framework

Ran Mizrahi

PHP + AngularJS

WifiWix - gojackogo!

Monday, April 1, 13

The Wix Third-Party Apps

Monday, April 1, 13

The Wix Third-Party AppsJS SDK

Deep LinkingInstance Decoding

Settings - View Sync

Settings Design

SecurityDB

Management

Full layout customization

Scaling

Editor Style

Monday, April 1, 13

Our stack...PHP 5.3 and above...Symfony2 frameworkComposerMongoDBAngularJSSASS using Compass

Monday, April 1, 13

This is our target for this workshop..

Monday, April 1, 13

Why use our framework?!

Full stack framework for developing power Wix apps.PSR-0 compatible PHP library.Adjusted to the Symfony2 frameworkDecoupled client-side and server-sideLarge set of tools for making apps development

Monday, April 1, 13

The Framework Parts

Wix Framework Component

Wix Framework Bundle (Symfony2)

AngularJS client side framework

Monday, April 1, 13

The stack was built using this!

Monday, April 1, 13

Let’s start..ssh user@app.hackathon.apps.wix.comUser app* , Password - asdf

https://github.com/ranm8/wix-demo-app

Monday, April 1, 13

Your local dev env..Nginx/Apache2PHP 5.3+.MongoDBComposer

You can use Winginx for easy installation of the entire stack..http://winginx.com/download

Monday, April 1, 13

Install composer

WindowsC:\bin>php -r "eval('?>'.f ile_get_contents('https://getcomposer.org/installer'));"

Mac/Linuxcurl -s https://getcomposer.org/installer | php -- --install-dir=bin

Monday, April 1, 13

Create your symfony2 app

$ php composer.phar create-project symfony/framework-standard-edition myApp/ 2.2.0

Monday, April 1, 13

Install the framework..Edit composer.json and add this lines:

$ php composer.phar update

"require": { "wix/framework-bundle": "dev-master", "doctrine/mongodb-odm-bundle": "3.0.*"},"minimum-stability": "dev"

Monday, April 1, 13

Install the framework..Edit your AppKernel and add those lines :

$bundles = array( ... new Wix\FrameworkBundle\WixFrameworkBundle(), new Doctrine\Bundle\MongoDBBundle\DoctrineMongoDBBundle() ...);

Create your app via Dev Center :http://dev.wix.com

Monday, April 1, 13

Install the framework..Configure your Wix app :

Go to “app/config/config.yml”# MongoDB Configurationdoctrine_mongodb: connections: default: server: mongodb://localhost:27017 options: {} default_database: hello_%kernel.environment% document_managers: default: auto_mapping: true metadata_cache_driver: array

# Wix Framework Configurationwix_framework: keys: application_key: 12e920bd-0098-1f33-c031-6ac2cca60082 application_secret: 818174da-33fb-4f53-9814-bbda85b20e7b

Monday, April 1, 13

Install the framework..

Clear cache and dump

$ app/console cache:clear$ app/console assets:install --symlink=web$app/console assetic:dump

Monday, April 1, 13

The Wix Controller

Lots of important helper methods!getUserDoc() - Fetch the current user doc from DB.updateUserDoc() - Save the given user doc to DB.getComponentId() - Validates and returns the current Wix component ID.getInstance() - Returns the current Instance object with compatible get/set methods

Monday, April 1, 13

The Wix Controllernamespace Wix\DemoBundle\Controller;

use Wix\FrameworkBundle\Configuration\Permission;

class UserController extends WixController{ /** * @Route("/") **/ public function updateUserAction() { // Write your code here... }}

Monday, April 1, 13

Security annotationsHelps you protect Symfony2 routes (e.g. settings) according to Wix instance permissions.Use simple annotation to protect your routes

namespace Wix\DemoBundle\Controller;

use Wix\FrameworkBundle\Configuration\Permission;

class UserController extends WixController{ /** * @Route("/") * @Permission({"OWNER"}) **/ public function updateUserAction() { // Write your code here... }}

Monday, April 1, 13

Wix Instance DecodingOur InstanceDecoder object provides easy way for decoding Wix instances..One method rules them all! Just use parse()..Returns compatible get/set method instance object

Monday, April 1, 13

Wix Instance Decoding// Plain PHP$instanceDecoder = new InstanceDecoder();$instance = $instanceDecoder->parse($_GET['instance']);

// Get the data$instanceId = $instance->getInstanceId();$productId = $instance->getVendorProductId();

// By extending our WixController$instance = $this->getInstance();

// Get the data$instanceId = $instance->getInstanceId();$productId = $instance->getVendorProductId();

Monday, April 1, 13

User Document - DB

Provides initial simple user document for managing Wix user object (instances) within your DB.Doctrine ODM based.You can easily extend the base user document by extending it.Then, just use the Wix controller.

Monday, April 1, 13

Wix Debug Toolbars

Allows easy on-the-fly debugging of Wix instances and API params.Included in Symfony profiler toolbar.Remembers the last request via the Symfony2 profiler console.

Monday, April 1, 13

Wix Debug Toolbars

Allows easy on-the-fly debugging of Wix instances and API params.Included in Symfony profiler toolbar.Remembers the last request via the Symfony2 profiler console.

Monday, April 1, 13

The AngularJS Wix Client Framework

https://github.com/ranm8/WixFrameworkComponentMonday, April 1, 13

Wix SDK wrapper

Returns promises instead of simple callbacksWraps the Wix SDK as AngularJS service

Monday, April 1, 13

Deep Linking support

AngularJS integrated routing for WixManage standard client-side routing.. We’ll do the restWhen new route pushed to URL, Wix will be updated as well

Monday, April 1, 13

Customized UI LibraryIntegrates jQuery UI capabilities to AngularJS and to your Wix app.Short list of supported directives :

Date picker.DialogAccordionChosen controls.AJAX Loaders.Draggable elements.Sliders.

Monday, April 1, 13

Wix’s Color-Picker built-in

Allows easy on-the-fly debugging of Wix instances and API params.Included in Symfony profiler toolbar.Remembers the last request via the Symfony2 profiler console.

Monday, April 1, 13

Server-client routing

Allows simple and easy integration of server-side routes.Define your endpoints easily and manage them from on place..In symfony2, based on FOSJSRoutingBundle.Can be easily adapted to any other server framework.

Monday, April 1, 13

Full settings style

SASS based style..Supports the Wix standards for settings.Plays nicely with other CSS rules.Provides bootstrap like library for the Wix style guild.

Monday, April 1, 13

And...we’re fully unit-

tested!!!

Monday, April 1, 13

Questions ?!?

Monday, April 1, 13