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
    Pagespeed Demo


    CSS Regression Tests


    Wraith


    Compare Dev-Staging-Prod
    Compare Actual vs Planned

    Wraith Demo

    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


    Presentation

    (Almost) Real Life Example

    XSS


    Presentation

    Real Life Example

    Sample JS Code

    Video Demo

    CSRF ,SQL Injection



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

    SQL Injection - similar to XSS but with SQL code


    ACtions!

    Time Left?


    Aral Balkan
    Made with Slides.com