Chase BrammerUsing RSL’s - Runtime Shared Libraries

ABOUT ME

CURRENTLY Developer at Rain Interactive.

Developing for Flex since 2006Developing for Flash since 2000

Working towards a masters in Information Systems Management at Brigham Young University (BYU)

Website: http://chasebrammer.comEmail: cbrammer@gmail.comTwitter: chaseb

All of my contact information is listed on my business card, come get one (I have a big box I will never go through unless you do)

ABOUT ME

RIA DEVELOPMENT

ABOUT RAIN

FranklinCovey, NuSkin, Novell, NextPage, HP, MyFamily.com, DataMark, MusicRain, Omniture

mediarain.com

RAINWhat started it all

If you decide to walk out now, it’s OK. Really.WHAT YOU WILL SEE IN THE NEXT HOUR

THE GOOD AND BAD OF RSLs

TERMS

USE CASESUsing the Flex Framework as an RSL to speed up load timeCreating your own RSLUsing an unsigned (non-Adobe) RSLUsing an cross-domain unsigned RSLOptimizing your RSLCollaborative work with RSL’sImplementing RSL with a build process (ANT)

WHAT YOU WILL NOT SEE IN THE NEXT HOUR Specific details are of the actual Flex Framework itself, stump the presenter with the most outlandish use case you can come up with, or super in depth details of the RSL (This is a 200 level course after all)

BUT REALLY WHY USING RSLs ROCK

THE GOOD AND THE BAD AND THE UGLY

ADVANTAGESReduce file size (faster download)Library CachingCode reuseFaster compile timeSingle Point of Distribution/UpdateCollaborative and Community Work

DISADVANTAGESCross domain issues (crossdomain.xml)Can't create signed RSL'sDebuggingQuick editingMust download the whole RSL, doesn’t trim unused classes

BECAUSE SIZE MATTERS

THE GOOD AND THE BAD AND THE UGLY

Flex with Button

Flex with Button, ComboBox, and TabNavigator

Flex with All Framework Components

Example taken from Ted Patrick’s announcement on RSL’s

BECAUSE SIZE MATTERS

THE GOOD AND THE BAD AND THE UGLY

Flex with Button

Flex with All Framework Components

Example taken from Ted Patrick’s announcement on RSL’s

Flex with Button, ComboBox, and TabNavigator

Because jargon is confusing

TERMS

RSL Runtime Shared Library

SIGNED RSL Adobe published RSLs (framework, datavis, rpc)

UNSIGNED RSL The RSL for the rest of us

SWZ An Adobe Signed RSL only for RSLs such as data visualization, Remoting, and the Flex Framework

SWC A zip that contains compiled Flash or Flex project that is not a standalone project. Typically a Flex Library project or a collection of assets exported from Flash

LIBRARY.SWF One of two files that are included in a SWC that hold the assets of the export (classes, modules, etc...)

CATALOGUE.XML The second file in a SWC that holds the structure and relationships of all the assets

COMPC The Component Compiler, a command line build utility used to create RSLs

BROWSER CACHE Your browsers of choice cache, not to be confused with the Flash Player Cache

FLASH CACHE The Flash Player’s internal cache that is used to store signed RSLs

ANT Automated command line build utility used to compile flex projects

No, it isn’t the soccer team Real Salt Lake

WHAT IS AN RSL

PURPOSE Why spent time using an RSL

To quickly reduce your application’s file size.

Code once, use in many places

HOW DOES IT DO THAT? Kung Fu. As in Neo type of Kung Fu.

Separates the large core of flex and lets your app go faster (like on Star Trek when they launch their core)

If possible loads the RSL from the Flash Cache (signed RSLs only)

If possible loads the RSL from the browser cache (unsigned RSLs only)

DEVELOPMENT Loads into your project just as if it were a local file, only you can’t edit it

Use case #1: How to speed up your application’s load time

FLEX CORE RSLS

Use case Your app is big. Too big. You need it smaller and faster.

Solution Separate your Flex Framework (or Data Visualization/Remoting) from your compiled swf so that your project loads like greased lightning.

How to do it

FLEX CORE RSLS

Let me show you.... but just for later reference

Right click your projectSelect Project PropertiesSelect ‘Flex Build Path’Select the ‘Library Path’ tabChange the Framework linkage to RSL

Be sure to add “use-network=false” in your compiler settings to avoid the nasty Error #2148 (Sandbox error)

Look at what we did!

FLEX CORE RSLS

Wow We just reduced our file size by 500k with 8 clicks (or so)

What are those extra files?

You will see two extra files in your release directory after you enable the RSL

framework_3.3.0.XXXX.swfframework_3.3.0.XXXX.swz

These two files are important. In case the end user doesn’t have the framework version you are using cached, then they will download it from you! If these two files aren’t there... you will have some headache.

Testing our deployment paths

FLEX CORE RSLS

Clear our cache - IMPORTANT

The framework RSLs are not stored in the browser cache. They are in fact stored is a secret little place that rarely ever gets seen. The Flash Cache. Only signed RSLs can be included in the flash cache, and if you don’t know about it existence, it will make debugging a living hell for you.

http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager03.html

Testing and changing our RSL deployment path

FLEX CORE RSLS

Testing

The best way to test if your RSL’s are loading in right (and not just loading in from your cache) is to clear your flash cache, and then move your local framework files (framework_x.x.xxxx.swf/swz) and see if you get an error.

If you get an error great! That means you have something to work with. Move your files back and make sure that everything works now.

Changed deployment path

Edit the RSL path, via selecting the RSL url and clicking edit

Use Case #2

CREATING YOUR OWN RSL

Use Case

You have a project that has a core set of components, libraries, or utilities that are pretty much stable and you don’t want to force the users to re-download all of that every time you release a new build.

Solution

Create a Runtime Shared Library.

Creating a Flex Library

CREATING YOUR OWN RSL

We could do all that we are going to do by using command line compilers (mxmlc/compc), but lets use the Flex Builder IDE for simplicity

Create a projectSelect files you want to includeThats it!

Now, lets look and see how to use your own, unsigned RSL

Use Case #3

USING A CUSTOM RSL

Use Case

You, a friend, a co-worker, or some dude in India just gave you a SWC, and you want to use it as an RSL

Solution

Import it it into your project, and make it an RSL

Using your own RSL

USING A CUSTOM RSL

Add the SWC to your project

Copy over your compiled SWC in to your libs folder

Right click your project and edit your Library Paths in your project preferences to add your SWC

Making your SWC into an RSL

USING A CUSTOM RSL

A picture says a thousand words, editing your RSL path

Use case #4: Using a Cross-Domain RSL

CROSS-DOMAIN RSL

Use case Your company has a common set of components, libraries, or assets that you want to share across multiple projects

Solution Create a Cross-Domain RSL

Too fast, lets digest some of this

CROSS-DOMAIN RSL

TO USE A CROSS-DOMAIN RSL you must have digest enabled

DIGEST A SHA-256 hash that acts as a checksum for your RSL.

WHAT DOES IT LOOK LIKE?

<digests> <digest type="SHA-256" signed="false" value="839c300d3805a839f4731a23169b8551d16ec167ad184eb6dad4b9cc58597d79" /></digests>

HOW TO ENABLE IT

-compute-digest=false

<compute-digest>true</compute-digest>

Use case #4: Using a Cross-Domain RSL

CROSS-DOMAIN RSL

HOW TO INCLUDE A CROSS-DOMAIN RSL

1) Open project properties2) Select Flex Build Path3) Select the Library Tab4) Click “Add a SWC”5) Add your SWC6) Open your SWC node5) Double click on Link Type6) Change the link type to RSL7) Change Verification to Digests8) Make sure your SWF and SWC are uploaded9) Enter your RSL URL, and Policy File URL

Use case #5: Cutting your RSL in half

OPTIMIZING YOUR RSL

Use case You just made an RSL and feel pretty good about yourself. But the client wants the app to load even faster.

Solution Optimize your RSL by using Optimus Prime! ... er.. the optimizer

Half the size? Why don’t they make RSL’s for people?

OPTIMIZING YOUR RSL

WHAT IS THE OPTIMIZER It is a tool provided by Adobe to cut out the fat of any file, which is debug information, markup data, and other suspicious characters.

WHAT IS THE RESULT In most cases it will reduce the file of your RSL by more than 50%

WHERE IS THE OPTIMIZER In your Flex SDK bin directory

HOW DO I USE IT like this!

optimizer -keep-as3-metadata="Bindable,Managed,ChangeEvent,NonComittingChagneEvent,Transient" -input MyRsl.swf -output optimized.swf

Use case #6: Collaborative Work

COLLABORATING VIA RSLS

WHY WOULD YOU WANT TO DO THAT To be used as a base for work to be expanded upon and shared throughout a community that has a large base, such as:

Libraries (SVG)Components (Flex.org libraries)Frameworks (Nimbus, Cairngorm, Mate, PureMVC)API’s (Facebook, Twitter)Utilities (AS3 Core Lib, Internal Company Libraries)

HOW WOULD IT HELP The more people who it, the more likely it will be that it has already been cached

BASE Although RSLs are not the solution for a many user collaborative development of its “self”, it can act as a very powerful, easy, and maintainable base to build on.

Use case #7: Deploying RSLs

AUTOMATED BUILDS AND RSLS

Use case You need to develop on your Flex Libraries, but what to deploy them as RSLs

Solution Use and automated build process (ANT, RAKE, etc) to create your RSLs

Use case #7: Deploying RSLs

AUTOMATED BUILDS AND RSLS

COMPILE Compile your SWC

EXTRACT Extract your SWF for your SWC

OPTIMIZE Optimize your SWF

MOVE Move your SWF to where you want it (maybe upload it)

COMPILE Compile your application

http://labs.adobe.com/wiki/index.php/Flex_3:Feature_Introductions:Flex_3_RSLshttp://www.oreillynet.com/pub/a/oreilly/digitalmedia/helpcenter/programmingflex3/chapter20.html?page=9

What was all that again?

SUMMARY

Runtime Shared Library

Separates your base (framework, library, components, etc) from your application. The seperated files are then cached for faster loading.

When should you use the Framework RSLs?

Pretty much always.

When should you use your own RSLs

When you have a big chunk of code that you don’t want to have to load in every time you make a change to your application

All code samples can be downloaded at http://www.chasebrammer.com/files/360flex.zip

Get a hold of that one guy

CONTACT

WEBSITE http://chasebrammer.com

EMAIL cbrammer@gmail.com

TWITTER chaseb

Seriously, come get my Business card, I have a whole case of em’