wix application framework
DESCRIPTION
Presentation about the Wix Application Framework that enables easy, scalable and tested way to quickly develop cutting edge Wix application based on AngularJS and Symfony2TRANSCRIPT
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 [email protected] 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