Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Wix Application Framework

2,509 views

Published on

Presentation about the Wix Application Framework that enables easy, scalable and tested way to quickly develop cutting edge Wix application based on AngularJS and Symfony2

Published in: Technology
  • Be the first to comment

Wix Application Framework

  1. 1. The Wix PHP Application Framework PHP + AngularJS Wifi Ran Mizrahi Wix - gojackogo!Monday, April 1, 13
  2. 2. The Wix Third-Party AppsMonday, April 1, 13
  3. 3. The Wix Third-Party Apps JS SDK Editor Style Settings Design Instance Deep Linking Decoding Scaling Settings - View Sync Full layout customization DB Security ManagementMonday, April 1, 13
  4. 4. Our stack... PHP 5.3 and above... Symfony2 framework Composer MongoDB AngularJS SASS using CompassMonday, April 1, 13
  5. 5. This is our target for this workshop..Monday, April 1, 13
  6. 6. Why use our framework?! Full stack framework for developing power Wix apps. PSR-0 compatible PHP library. Adjusted to the Symfony2 framework Decoupled client-side and ser ver-side Large set of tools for making apps developmentMonday, April 1, 13
  7. 7. The Framework Parts Wix Framework Component Wix Framework Bundle (Symfony2) AngularJS client side frameworkMonday, April 1, 13
  8. 8. The stack was built using this!Monday, April 1, 13
  9. 9. Let’s start.. ssh user@app.hackathon.apps.wix.com User app* , Password - asdf https://github.com/ranm8/wix-demo-appMonday, April 1, 13
  10. 10. Your local dev env.. Nginx/Apache2 PHP 5.3+. MongoDB Composer You can use Winginx for easy installation of the entire stack.. http://winginx.com/downloadMonday, April 1, 13
  11. 11. Install composer Windows C:bin>php -r "eval(?>.file_get_contents(https://getcomposer.org/ installer));" Mac/Linux curl -s https://getcomposer.org/installer | php -- --install-dir=binMonday, April 1, 13
  12. 12. Create your symfony2 app $ php composer.phar create-project symfony/framework-standard- edition myApp/ 2.2.0Monday, April 1, 13
  13. 13. Install the framework.. Edit composer.json and add this lines: "require": { "wix/framework-bundle": "dev-master", "doctrine/mongodb-odm-bundle": "3.0.*" }, "minimum-stability": "dev" $ php composer.phar updateMonday, April 1, 13
  14. 14. Install the framework.. Edit your AppKernel and add those lines : $bundles = array( ... new WixFrameworkBundleWixFrameworkBundle(), new DoctrineBundleMongoDBBundleDoctrineMongoDBBundle() ... ); Create your app via Dev Center : http://dev.wix.comMonday, April 1, 13
  15. 15. Install the framework.. Configure your Wix app : Go to “ app/config/config.yml” # MongoDB Configuration doctrine_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 Configuration wix_framework: keys: application_key: 12e920bd-0098-1f33-c031-6ac2cca60082 application_secret: 818174da-33fb-4f53-9814-bbda85b20e7bMonday, April 1, 13
  16. 16. Install the framework.. Clear cache and dump $ app/console cache:clear $ app/console assets:install --symlink=web $app/console assetic:dumpMonday, April 1, 13
  17. 17. 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 methodsMonday, April 1, 13
  18. 18. The Wix Controller namespace WixDemoBundleController; use WixFrameworkBundleConfigurationPermission; class UserController extends WixController { /** * @Route("/") **/ public function updateUserAction() { // Write your code here... } }Monday, April 1, 13
  19. 19. Security annotations Helps you protect Symfony2 routes (e.g. settings) according to Wix instance permissions. Use simple annotation to protect your routes namespace WixDemoBundleController; use WixFrameworkBundleConfigurationPermission; class UserController extends WixController { /** * @Route("/") * @Permission({"OWNER"}) **/ public function updateUserAction() { // Write your code here... } }Monday, April 1, 13
  20. 20. Wix Instance Decoding Our InstanceDecoder object provides easy way for decoding Wix instances.. One method rules them all! Just use parse().. Returns compatible get/set method instance objectMonday, April 1, 13
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. The AngularJS Wix Client Framework https://github.com/ranm8/WixFrameworkComponentMonday, April 1, 13
  26. 26. Wix SDK wrapper Returns promises instead of simple callbacks Wraps the Wix SDK as AngularJS ser viceMonday, April 1, 13
  27. 27. Deep Linking support AngularJS integrated routing for Wix Manage standard client-side routing.. We’ll do the rest When new route pushed to URL, Wix will be updated as wellMonday, April 1, 13
  28. 28. Customized UI Library Integrates jQuery UI capabilities to AngularJS and to your Wix app. Short list of supported directives : Date picker. Dialog Accordion Chosen controls. AJAX Loaders. Draggable elements. Sliders.Monday, April 1, 13
  29. 29. 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
  30. 30. Server-client routing Allows simple and easy integration of ser ver-side routes. Define your endpoints easily and manage them from on place.. In symfony2, based on FOSJSRoutingBundle. Can be easily adapted to any other ser ver framework.Monday, April 1, 13
  31. 31. 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
  32. 32. And... we’re fully unit- tested!!!Monday, April 1, 13
  33. 33. Questions ?!?Monday, April 1, 13

×