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 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!