FlexJS Case StudyJustin 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

of 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

or email me at justin@classsoftware.com.

Slides can be found at conference site.