Top Banner

Click here to load reader

of 29

Code quality tools

Sep 12, 2014

ReportDownload

Technology

This presentation provides participants with an overview of
the most popular tools for code quality control in Flex. Among them: Sonar with Flex plugin, FlexPMD & FlexPMD Eclipse plugin, SWFScan from HP and FlexFormatting Eclipse plugin.
In this presentation will be presented the basic information about each of the mentioned tools, information how to configure some of these tools, how to use them and How to interpret results of their work.

Agenda:
Sonar with Flex plugin
FlexPMD
-What is FlexPMD
-How does it work
FlexPMD plugin
-Configuration
-Supported workflows
-FlexCPD integration
-FlexPMD Ruleset Creator
SwfScan from HP
FlexCover
ItDepends
FlexFormatting

  • AgendaSonar with Flex pluginFlexPMDWhat is FlexPMDHow does it workFlexPMD pluginConfigurationSupported workflowsFlexCPD integrationFlexPMD Ruleset Creator SwfScan from HP FlexCover ItDepends FlexFormatting

  • Sonar with Flex Plugin Sonar is a tool for code quality analysis. It helps improving software quality using static analysis tools. It targets Java code, but there are plugins for Flex, C, PHP, .Net and other languages. The Flex plug-in specifically uses FlexPMD, FlexMetrics, FlexCPD and FlexMojos.

  • Sonar's ResultsDashboardViolationsdrilldown

  • Sonars ResultsHotspotsRadiatorTimemachine

  • Sonars ResultsMotion Chart

  • What is FlexPMDFlexPMD is a tool that helps to improve code quality by auditing any AS3/Flex source directory and detecting common bad practices.http://opensource.adobe.com/wiki/display/flexpmd/FlexPMD

    FlexPMD can detect:

    Coding standards violationsCode duplicationUnused code (functions, variables, constants, etc.)Over-complex code (nested loops, too many conditionals, etc.)Over-long code (classes, methods, etc.)Unhandled exceptionsIncorrect use of the Flex component lifecycle (commitProperties, etc.)

  • How to invokeFlexPMD can currently be invoked from:

    The command lineMavenAntAutomator on Mac OS XEclipseFlexBuilder TextMate on Mac OS XFlashDevelop

  • How does it workFlexPMD is delivered with a set of standard rules for Flex/AS development. Each source file that is processed is checked against every rule. Currently, FlexPMD produces a XML report by default, plus an HTML report when invoked by the Maven site plugin.

  • FlexPMD PluginThe FlexPMD Plugin is a plugin to streamline the development process in regards to FlexPMD violations

    Update sitehttp://opensource.adobe.com/svn/opensource/flexpmd/plugin/trunk/flex-pmd-eclipse-plugin-site

    It analyses the code and marks the violations inline in the code so that developers can see them as they develop

    It allows easy navigation between the list of violations and the associated code

  • Configure FlexPMD pluginDownload FlexPMD command line tools (http://opensource.adobe.com/wiki/display/flexpmd/Downloads )

    FlexPMD command line. This is a mandatory field. You have to select the flex-pmd-command-line.jar from your hard drive.FlexPMD custom ruleset. You can leave this field empty, if so a default ruleset will be used.FlexCPD command line. You have to select the flex-pmd-cpd-command-line.jar you wish from your hard drive.

  • Supported workflows Code review workflowCode review workflow: As a code reviewer I want to be able to audit and review the quality of an entire project or any given functional area in terms of PMD violations.

    Ideal forProjects that didnt use FlexPMD from the very beginningProjects where not all developers use FlexPMDAudit specific functional areas

    BenefitsFlexPMD recommendations are displayed in a specific panel and can be sorted attending its relevance or violation type

  • Code Review workflowSelect any source folder in a projectRight click on itSelect FlexPMD > Run FlexPMD

  • Supported workflows Development workflowDevelopment workflow: As a developer I want to see PMD violations in the files I'm working in. If a file changes the violations should be updated immediately.

    Ideal forProjects that start using FlexPMD from the very beginningTeams that proactively want to promote collective code and team best practices

    BenefitsFlexPMD execute automatically on every compilation

  • Development workflowRight click in a projectSelect FlexPMD > Add FlexPMD Nature

    Note: If at any point you want to remove the nature you can select FlexPMD > Remove FlexPMD Nature

  • FlexPMD OutlineIn the FlexPMD Outline View you'll see the violations in the currently opened editor.

    If the arrows button is toggled, whenever the file is saved FlexPMD will be re-executed on it and the Outline will be updated providing always up-to-date information to the developer with very little delay and without having to compile the entire project.

  • FlexCPD integrationFlexCPD can detect suspect copy/paste sections of code in your project.Executes on demandYou can execute FlexCPD by right-click in a source folder and select FlexPMD > Find suspect cut & paste. Creates a list of snippets of duplicated codeYou can navigate to the source code file by double clicking on the item

  • FlexPMD Ruleset Creatorhttp://opensource.adobe.com/svn/opensource/flexpmd/bin/flex-pmd-ruleset-creator.html

  • SwfScan from HPHP SWFScan, a free tool developed by HP Web Security Research Group, will automatically find security vulnerabilities in applications built on the Flash platform.

    How SWFScan works and what vulnerabilities it finds: Decompiles applications built on the Adobe Flash platform to extract the ActionScript code and statically analyzes it to identify security issues such as information disclosure. (The tool couldnt decompile flash files protected with SWFEncrypt.)

  • SwfScan from HP SettingsIt looks for about 75 known security vulnerabilities that are targeted by malicious hackers.

    This includes unprotected confidential data, cross-site scripting, cross-domain privilege escalation, and user input that does not get validated.

  • SwfScan from HP Results

  • FlexCoverFlexcover - a tool that measures how much of your Flex, AIR or AS3 application code actually runs when tested.http://code.google.com/p/flexcover/

    Install FlexCoverCreate a copy of the Flex SDK that you will customize for FlexcoverModify this custom SDK to use the Flexcover compilers and libraries.Modify your own build tools to use the custom Flexcover SDKInstall the CoverageViewer AIR Application

  • FlexCoverRun Tests

    The .cvm file will be generated

  • FlexCoverLaunch the Coverage Viewer, then click the Load File... button; in the resulting dialog, locate the xxx.cvm file and click Open.

  • ItDependsItDepends is a tool for visually exploring the dependencies between classes and packages in an Adobe Flex application, with the aim of making it easy for developers to understand how their application can be made smaller and/or broken up into dynamically loadable moduleshttp://code.google.com/p/it-depends/wiki/UsingItDepends

    ItDepends works with an XML link report file generated by the MXMLC compiler's -link-report option. This file describes all the classes in the application and their dependencies and code sizes.

  • ItDepends

  • FlexFormattingEclipse plugin that provides mxml/actionscript source code formattingUpdate site - http://flexformatter.googlecode.com/svn/trunk/FlexFormatter/FlexPrettyPrintCommandUpdateSite/

    Settings

  • FlexFormatting Example Before & After

  • Questions

    *