FlexJS Case Study Justin Mclean Class Software Email: - - PowerPoint PPT Presentation

FlexJS Case Study

Justin Mclean Class Software Email: justin@classsoftware.com Twitter: @justinmclean

Testing FlexJS

• Wasn’t this supposed to be a talk about testing?
• Things are a bit broken with FlexUnit and FlexJS
• Probably wouldn't tell you that much you didn't know
• Talk on real life case study instead

Who am I?

• Freelance Developer - programming for 25 years
• Incubator PMC and Apache Flex PMC plus a few others, Apache

member and a mentor for several incubating projects

• Flex developer since version 1.5
• Release manager for FlexSDK and have fix 100’s of bugs
• Run IoT meetup in Sydney Australia

Case Study

Existing project

• Flex legacy application with a large amount of technical debt
• Flex mobile application
• Existing database and back end system
• Tried to port application to FlexJS but was too hard
• Large amount of new functionality
• Decided to rewrite from scratch
• Client requires JS client

Community builder

• Framework for building communities based around diversity and

inclusion.

• 3 months 2 developers about 50% time for front end, back end

and infrastructure.

• JS output only. May use AS for mobile in future?
• One front end server / one DB server. Will have to scale
• Existing team needed some education about modern development

practices.

• one framework several sites multiple domains.
• Currently live

Dev site

Dev site

Dev site

Code size

• Language files blank comment code
• CSS 23 101 452 15038

MXML 65 1534 496 7163 ActionScript 70 595 435 6125 Javascript 49 708 147 2643 XML 7 0 0 1892 Maven 1 7 0 135 HTML 3 0 0 42 ColdFusion 1 0 0 16

• SUM: 219 2945 1530 33054

One code base many sites

• Multiple sites on one codebase
• Several clients
• Domain name driven
• Feature toggles
• Site by site styling
• Dev and live sites / databases

What works

• General layout and simple styling
• Simple cases of responsive design
• Making HTTP calls returning JSON
• Component style architecture (but can't extend some

components)

• Simple binding
• Basic animation / effects
• Custom event dispatching
• States (surprisingly)

Risks

• Missing features in SDK
• Lack of documentation
• Bugs in SDK
• Things change and may break you build
• Things change and may break your layout
• Can be mitigated by

• keeping a close eye on checkins / mailing list

• keeping a number of last builds

State of play

• Perhaps not quite 100% ready for prime time
• Run into a number of issues
• However just about every issue had a workaround
• Some issues have been fixed in recent versions of the SDK
• Expect some lost productivity due to this
• Have simple examples to check if issues have been fixed

Issues

Unable to set background colours

• Unable to set background colours in some cases
• Work around was to use named colours
• Fix in framework so #RGB should work but may still not 100%

perfect when dealing with alpha

Containers ignore padding

• Can simulate via fake padding like so:


<js:View width="100" height="100">
 <js:style>
 <js:SimpleCSSStyles backgroundColor="red" />
 </js:style>
 <js:Group x="20" y="20" width="60" height="60">
 <js:style>
 <js:SimpleCSSStyles backgroundColor="white" />
 </js:style>
 </js:Group>
 </js:View>

Containers ignore padding

• Improvements have been made but still IMO a little broken


<js:View width="100" height="100">
 <js:style>
 <js:SimpleCSSStyles backgroundColor="red" padding="20" />
 </js:style>
 </js:View>

• Gives a red square with no padding margin=“20” however does

work

Conditional compilation

• COMPILE:SWF and COMPILE:JS don’t seem to work under all

conditions

• loose typing / using bracket notation rather than dot notation can

work around this

Font support

• Missing font support on JS side
• Work around inject font bead


public class Catamaran extends BeadViewBase {
 /**
 * <inject_html>
 * <link rel="stylesheet" type="text/css" href="https:// fonts.googleapis.com/css?family=Catamaran:400,500,600,700">
 * </inject_html>
 */
 public function Catamaran() {
 super();
 }
 }
 }

Missing styles

• A lot of basic styles are missing from SimpleCSSValuesImpl
• Can be worked around by explicitly setting style


<js:Label id=“footer" style=“line-height:38;fontWeight:600;”/>

• But not likely to be cross platform
• Would be good to see a minimum set of common JS styles

implemented not just AS ones

• Could aim for the CSS 2.1 well supported subset of properties as

listed by http://caniuse.com

• May not have consensus on AS vs JS styles and parity between

them

Alert is broken

• No Alert popup shown
• Use SimpleAlert or create own component to work around

Labels are not clickable

• This compiles but you can’t click on the label


<js:View percentWidth="100" percentHeight="100">
 <js:Group>
 <js:Label text="Click Me" click="clickMe()" />
 </js:Group>
 </js:View>

• Seems to have toggled back and forth?
• Use button instead and style away border and background colour

Background alpha is broken

• Work around by applying background colour with alpha - not

perfect.
 <js:Group width="100" height="100">
 <js:style>
 <js:SimpleCSSStyles backgroundColor="rgba(255,0,0,0.1)" / >
 </js:style>
 </js:Group>

• Fixed identified but not fixed in framework yet

Visibility layout bug

• Things don't layout as intended when changing visibility
• Can work around if you take care in setting order of containers /

groups

• Start with everything visible and set visible to false on

applicationComplete

• Never have everything with visibility set to false

Horizontal lists

• Are very broken
• But simple work around manually set style like so


style=“overflow-x:auto;overflow-y:hidden;"

Resizing

• You may have to manually calculate sizes in some cases
• Even when including


<js:BrowserResizeHandler />

• Workaround


addEventListener("sizeChanged", sizeChanged);

• And add only code to resize items based on browser window size

MXML components

• Most components can't be used as MXML components
• Make code a bit more verbose

Multiline text with newlines

• Can use MultilineLabel with html newlines

Scroll events not dispatched by scroller

• Ugly work around reach in and listen to them
• This is allways an option / worse case

Visibility changes moves content of container

• Workaround set x and y to 0

Percent X and Y values

• Percent width and height are supported but not percent X and Y
• Can’t mix % and absolute values easily

Font weight

• Unable to use numeric font weights
• Fixed in SDK after some discussion

Scroll bars show in browser

• Hack to remove


this.element['style'].overflowX = 'hidden';
 this.element['style'].overflowY = 'hidden';

Development

Observations

• Some issues that need workarounds
• But mostly just works
• Code can be a little more verbose than Flex or JS
• Errors are caught early in IDE / at compile time
• Layout is relatively easy
• Styling via CSS is relatively easy
• Some browser differences
• Performance is good even with debug version
• A little on the large size

Things Change

• Layout changes re containers and groups
• Padding / margin
• Recent changes mean compile times has significantly increased
• Need to modify Maven pom.xml significantly and there was a lack
• f information around the required changes

Security

• Project is undergoing a security audit
• Access to back end calls
• DB not publicly accessible
• SQL injection attacks
• Login security
• File uploads

Back end services

• Both JSON and AMF
• AMF used by existing mobile application
• JSON used by desktop app
• Works as expected with minimal code after sorting CORS issues
• Dates are always an issue!

CORS

• Need for authentication / pass user cookies
• Requires both server side and client side setup
• On server side


Access-Control-Allow-Origin
 Access-Control-Allow-Credentials

• On client side need to set withCredentials for some calls
• CORS bead / method added to do this
• Currently bug in how beads are added / removed that make this a

little less than ideal

Development Environment

Local Development

• IntelliJ IDE - little complex to set up
• Compile via command line and run locally
• Browser security issues - may need to disable security and launch

browser via command line

• Mostly 1-1 correspondence of AS to JS generated code
• Browser debugging (Chrome) is often good enough to set break

points and debug variable names Could use source maps

• Easy to debug remote calls

Github

• Version control
• Issues
• Projects / Milestones
• Likely to move to self hosted instance of GitLab at some point

Maven

• Build via maven
• It’s fast and it works
• Has required changes occasionally due to frame work changes

Jenkins

• Behind VPN / internal
• Runs on linux
• Compiles project (via maven) on checkin
• Runs sonar cube and FTPs to development servers
• Keeps full builds in case something breaks and we need to revert

to previous build

• Jenkins jobs to deploy to production

Hipchat

• Distributed team / clients
• 4 states / 4 time zones
• Jenkins and Github integration

Sonar Cube

• Behind VPN
• Tracks code quality, looks for security bugs
• Will report on JS and AS files (misses MXML files)
• Easy to run locally as well

What next?

• Further development
• More sites / differences between sites
• Fix a few bugs we had found with the compiler and SDK
• Unit testing / integration with CI
• Grow the team

Questions?

Ask now, see me after the session,
 follow me on twitter @justinmclean


• r email me at justin@classsoftware.com.

Slides can be found at conference site.