DoVelop* 
Fall 2013

Capabilities growth





* Dofinity + Development = DoVelop

 Develop Scope

Single platform (project) to grow our foundations (capabilities) in a prioritized and coordinated manner

  • Personal Projects
  • R&D
  • Dobase
  • Dofinity
  • Procedures & Tools
  • Knowledge Distribution
  • Hosting Foundations
  • Marketing Support
  • etc.

Develop Sources


  • Existing Backlog
  • DrupalCon 2013
  • Marketing Needs

Information Explosion 
=> We need focus
=> Forming 7 initiatives

DoVeleop - How


  • Areas of Responsibility
  • Focal Initiatives
  • Backlog to manage
  • Monthly Review + Prioritization (aka sprints)
  • Desire to grow


Develop - How (Cont)


Sample Deliverables
  • Code (Dobase, Project, Custom Module)
  • Best Practices / Guidelines (Confluence)
  • Procedures (Confluence)
  • Tips & Tricks (Confluence)
  • Documents Templates (ftopia)
  • Process Adjustments (Confluence, Prezi)
  • Research (ftopia, Confluence)
Training / Knowledge Transfer is a MUST for all of the above.

Q4 2013 - PRIORITIZED TOPICS


  • Testing
  • Backoffice Handling
  • Support
  • Frontend
  • Performance
  • Design Techniques
  • Commerce

    Offsite Goals


    Jump start DoVelop

    This will be done by:
    • Setting up a common ground for the project
    • Presenting relevant information from DrupalCon
    • Reviewing the existing initiatives and related tasks
    • Turning ideas into actionable items

    Offsite Agenda

    8:30 - Offsite kickoff: Goals, Agenda, Work method

    9:00 - The Way We Execute - Udi

    10:45 - Break

    11:00  - Session I - Udi

    12:30 - Lunch

    13:15 - Session II - Peleg

    14:45 - Session III - Aviv

    16:15 - Break

    16:30 - Parking Lot

    17:15 - Planning : Actions & Timeline

    18:00 - Closing

    Pre-Requisite


    Enhancing our process requires knowing it thoroughly

    Thus... 

    The Way We Execute


    Key concepts:
    • Agile oriented ( WF , RAD, Spiral mixed)
    • Micro Scale - Time Bounded (vs. Scope)
    • Macro Scale - Budget Bounded (vs. Scope)
    • Iterative process - Sprints based.
    • Holy Trinity:
      • Question <=> Requirements, Analysis
      • Answer <=> Design, Coding
      • Validation <=> PT, TX, Testing

    Terminology


    • Weekly Planning (Dofinity)
    • Sprint (Agile , Dofinity)
    • Backlog (Agile) / Features List (Dofinity)
    • Release (Dofinity)
    • Version (Dofinity)
    • More?

    Roles


    • Sales
    • Account Manager
    • Project Manager
    • Architect / Functional Designer
    • UX Expert
    • Graphic Designer
    • Dev Lead
    • Developer
    • Dev Ops / Sys Admin
    • Support Lead



    The Way We Execute

    The Golden Rules


    • RCCP - Req, Company, Community, Pareto
    • Work Outside-In
    • Cross team face-to-face meetings
    • Change is Blessed

    Further Agenda


    • Frontend Performance
    • Frontend Ops
    • Testing
    • Auditing (Coding Standards, Security, Performance)




    Frontend Performance



    The 10 golden tips: 
    • CSS on top (Done by Drupal) 
    • JS at the bottom - implement DoBase hook
    • Remove unnecessary CSS - implement Dobase hook
    • ADVAGG on DoBase  
      • Send less data (no duplication of CSS)
      • Minify CSS / JS (mainly)
      • Aggregate
    • Lazy Load on Isotope and the likes - Custom Module?
    • Sprites - Use GRUNT + COMPASS
    •  GZIP (Dahhh)
    • Perform Parallelization:
      •  Pre-DNS call 
      • Use CDN module - Smart assets distribution
    • Turn on 10 min minimum-cache-life-time at Drupal Cache Page
    • Implement progressive jpg on DoBase?


    Actions!




    Frontend Ops

    Automation Tools


    Grunt

    PhantomJS

    SlimerJS

    CSS / JS Authoring


    JSHint + Grunt
    Local demo
    (optional) Session demo

    • uglifyjs
    • script concatenation
    • image minification
    • Compass
    • LiveReload
    • jekyll-build
    • dev/prod build modes

    Performance Tools



    YSlow for node.js + PhantomJS
    YSlow for PhantomJS
    PageSpeed + Grunt

    PhantomJS + YSlow Local Demo
    (Optional) YSlow Session Demo


    CSS Regression Tests


    Wraith


    Compare Dev-Staging-Prod
    Compare Actual vs Planned

    Looking Forward


    Where do we go from here?
    Own view: Integrated Development Environment...

    Have a dashboard automatically presenting all perspectives of a  given change:
    • Syntax
    • Coding Standards
    • Logic Validity
    • Performance
    • Security
    • Compatibility - Browsers
    • Compatibility - Breakpoints
    • Regression
    • UX?



    Actions!




    Testing



    Testing Status


    What are we short of?

    • Lack of attention
    • Lack of process
    • Lack of tools
    • Lack of best practices

    Let's change that!

    Test-Driven Development (TDD)


    Add a test, get it to fail, and write code to pass the test 

    TDD is a robust way of designing software components (“units”) interactively so that their behaviour is specified through unit tests

    TDD (Cont)


    Unit tests:
    "Not an effective way to find (the really devious) bugs or detect regressions."  [Steven Sanderson]

    • Finding Bugs - Use: Integration Tests
    • Finding Regression - Use Automated Tests
    • Performing Design - Use Unit Test

    Behavior-driven development (BDD)

    Unit Test: 
    • Whole sentences starting with the word "should" 
    • Written in order of business value
    Acceptance Test:
    • Based on User Stories
    • Each Story consists of: Title + Narrative + Scenarios (Criteria)

    Test-bind Development (TbD)



    Plan your tests, write your code, write the tests and pass them (feature level).


    Feature = Design + Test Planning + Coding + Testing

    Tools


    PHPUnit 
    • Exist 12 years
    • Drupal 8 chosen platform

    PhantomJS + Mocha / Jasmine
    • Headless Webkit browser emulation
    • Light-weight and graphic less hence fast


    Tools (Cont)


    Selenium 
    • Browser Automation Tool
    • Actually a suite of tools (RC, IDE, Grid)

    Behat
    • PHP Testing Framework
    • BDD Based for higher level tests (acceptance)

    PHPUnit


     <?php
class StackTest extends PHPUnit_Framework_TestCase
{
    public function testPushAndPop()
    {
        $stack = array();
        $this->assertEquals(0, count($stack));
 
        array_push($stack, 'foo');
        $this->assertEquals('foo', $stack[count($stack)-1]);
        $this->assertEquals(1, count($stack));
 
        $this->assertEquals('foo', array_pop($stack));
        $this->assertEquals(0, count($stack));
    }
}
?>

    Selenium


    Selenium

     <?php

require_once 'PHPUnit/Extensions/SeleniumTestCase.php';

class Example extends PHPUnit_Extensions_SeleniumTestCase
{
  function setUp()
  {
    $this->setBrowser("*firefox");
    $this->setBrowserUrl("http://www.google.com/");
  }

  function testMyTestCase()
  {
    $this->open("/");
    $this->type("q", "selenium rc");
    $this->click("btnG");
    $this->waitForPageToLoad("30000");
    $this->assertTrue($this->isTextPresent("Results * for selenium rc"));
  }
}
?>

    Now we are less short of...


    • Awarness - hack we just talked about it, right?
    • Process - Test Binded Development
    • Tools - Phased approach:
      • Phase 1: PHPUnit 
      • Phase 2: Add PhantomJS (+ Grunt)
      • Phase 3: Add / Replace with Selenium
      • Future: Behat?
    • Best Practices - Will evolve as we move forward


    Actions!




    Auditing

    Site Auditing


    Review Site Audit new template
    Demo at JSOC




    Security

    Access Bypass



    (Almost) Real Life Example

    XSS



    CSRF ,SQL Injection



    CSRF - Someone knows that you are an Admin...

    SQL Injection - similar to XSS but with SQL code


    ACtions!

    Time Left?


    DoVelop + Offsite 2013 [Udi]

    By dofinity

    Made with Slides.com

    DoVelop + Offsite 2013 [Udi]

    • 290

    More from dofinity