Write once... Take Less Time to Deploy


Published on

Introduction to internationalization and globalization issues and explanation of Flex's ability to overcome some of these issues elegantly.

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Public domain image courtesy of Bartledan
  • Write once... Take Less Time to Deploy

    1. 1. Write Once… Take Less Time to Deploy Everywhere Michael Labriola Senior Consultant Digital Primates Page 0 of 59 Page 1 of 59
    2. 2. Who am I? <ul><li>Michael Labriola </li></ul><ul><li>Senior Consultant </li></ul><ul><li>Digital Primates </li></ul><ul><li>Client side architect specializing in Adobe Flex </li></ul><ul><ul><li>Designed and implemented UCA and CLDR implementation for ActionScript </li></ul></ul><ul><ul><li>Lead architect and developer of FlexUnit 4 and Fluint </li></ul></ul><ul><li>Flex Team Mentor </li></ul><ul><li>Individual Member of the Unicode Consortium </li></ul><ul><li>Architected applications deployed worldwide </li></ul>Page 2 of 59
    3. 3. What are we going to cover? <ul><li>The challenges of internationalizing and localizing an application </li></ul><ul><li>A general strategy for keeping some of these challenges in check by using a well-defined presentation tier </li></ul><ul><li>An overview of Adobe Flex </li></ul><ul><li>An understanding of how Flex can help </li></ul>Page 3 of 59
    4. 4. Terminology <ul><li>As with every technical debate, at some point the definition of the words internationalization(i18n) and localization(L10n) will be called into question. </li></ul><ul><li>Here are the definitions I choose to use for this presentation: </li></ul>Page 4 of 59
    5. 5. Terminology <ul><li>i18n – designing and developing a product to be easily adaptable to a multitude of cultures, languages and locations </li></ul><ul><li>L10n – Adapting that product to meet the needs to a specific market </li></ul>Page 5 of 59
    6. 6. Challenges of global applications <ul><li>Internationalization is not free. </li></ul><ul><li>It is usually not cheap. </li></ul><ul><li>Regardless of the platform you choose for development, it is never completely automatic </li></ul>Page 6 of 59
    7. 7. Challenges of global applications <ul><li>Internationalization is a process and even more so an awareness that must be continually evaluated throughout development </li></ul><ul><li>It is made easier when considered from the beginning and disproportionately more difficult when it is an after thought </li></ul>Page 7 of 59
    8. 8. Challenges of global applications <ul><li>International support is a business decision </li></ul><ul><li>The goal of internationalizing a product is to reach new markets </li></ul><ul><li>The ultimate goal is to ensure that the decision to pursue new markets is a business, not a technical, choice </li></ul>Page 8 of 59
    9. 9. Challenges of global applications <ul><li>The decision to internationalize is a big deal </li></ul><ul><li>It means a bigger budget, new requirements and longer development and QA cycles </li></ul><ul><li>Why do it? Ideally to sell the same software the a new marketplace. To achieve a bigger ROI on software. </li></ul>Page 9 of 59
    10. 10. Challenges of global applications <ul><li>Internationalization is not an all or nothing decision. </li></ul><ul><li>There are decisions as to the amount of support </li></ul><ul><li>The more support, the more cost, the more opportunity to reach new markets. </li></ul>Page 10 of 59
    11. 11. Visibility of Efforts Page 11 of 59
    12. 12. Externalizing Content <ul><li>Externalizing content is a highly visible step. It involves removing all hard coded labels and messages </li></ul>While visible, only performing this step will mean that you can support different locales speaking the same language reasonably well. You can likely support some additional locales poorly. Page 12 of 59
    13. 13. Challenges: Externalizing <ul><li>Externalizing content means that nothing displayed to the user can be hard-coded in your application </li></ul><ul><li>Labels </li></ul><ul><li>User Messages </li></ul><ul><li>Error Messages </li></ul><ul><li>Reference Data </li></ul><ul><li>Date and Time Formats </li></ul>Page 13 of 59
    14. 14. Challenges: Externalizing <ul><li>All external content must be defined in some external source such as a property file, XML document or even database </li></ul><ul><li>All code must respect variability. You cannot have code such as: </li></ul><ul><li>if ( selectedItem == &quot;Male&quot; ) { </li></ul><ul><li>} </li></ul>Page 14 of 59
    15. 15. Challenges: Externalizing <ul><li>Further, when parsing user input, you cannot assume currency symbols, placement of text punctuation or order of elements. </li></ul><ul><li>Output display and input parsing need to work together else you are displaying one format to a user and asking them to enter data in another. </li></ul><ul><li>The result would be an unusable application </li></ul>Page 15 of 59
    16. 16. Using Unicode <ul><li>Unicode maps every viable character to a unique code point, allowing you access to a multitude of written languages </li></ul>CLDR - Unicode Common Locale Data Repository provides locale specific data which explains how to use and format data for a given locale. Page 16 of 59
    17. 17. Challenges: Unicode <ul><li>There are various levels of Unicode support in different runtimes, development languages and tools </li></ul><ul><li>Internally storing strings for display and user input as Unicode code points is a great step forward, however, care still needs to be taken whenever searching, comparing or manipulating strings. </li></ul>Page 17 of 59
    18. 18. Challenges: Unicode <ul><li>Comparing strings in the world of Unicode is not quite the simple == operation many of us are used to. </li></ul><ul><li>Standard string comparison functions built into languages may or may not work for this purpose </li></ul><ul><li>Worse yet, they may appear to work in your locale and only break with others </li></ul>Page 18 of 59
    19. 19. Challenges: Unicode <ul><li>By way of example, different versions of the Flash runtime have different Unicode support. </li></ul><ul><li>Most versions store strings as UTF-16 internally, however, support for characters outside of the Basic Multilingual Plane (BMP) is trickier and not as intuitive </li></ul>Page 19 of 59
    20. 20. Challenges: Unicode <ul><li>Further, remember that there is no such thing as a universal sort </li></ul><ul><li>Unicode helps us to define common characters. However, those characters are used in different locales in different ways. </li></ul><ul><li>The same physical character often sorts in a different order in neighboring locales </li></ul>Page 20 of 59
    21. 21. Challenges: Unicode <ul><li>Do not assume that your development tools, language, etc. understands and handles this sorting properly </li></ul><ul><li>Before version 10.1 of the Flash runtime, it was necessary to use 3 rd party tools to accomplish this sorting correctly </li></ul>Page 21 of 59
    22. 22. Dynamic Sizing and Placement <ul><li>How much space content should take and where it should be placed on the screen is defined by language, locale and font </li></ul>It is unlikely that a translated message to another language will ever take the exact same amount of screen space. Some locales will expect form headings and scroll bars to be in drastically different places. Page 22 of 59
    23. 23. Challenges: Sizing and Placement <ul><li>Therefore, you can never assume an absolute font size. Some glyphs cannot be accurately displayed below approximately a 12pt font </li></ul><ul><li>You can also never assume that two strings will concatenate in the same way in different languages. </li></ul><ul><li>Care must be taken with text inputs embedded in a string </li></ul>Page 23 of 59
    24. 24. Challenges: Sizing and Placement <ul><li>As noted, strings represented in different languages and different fonts take different amounts of space to display </li></ul><ul><li>Not only can you not assume the size of a field, you must also not assume absolute positioning of other fields </li></ul><ul><li>Sizing and placement must be handled fluidly </li></ul>Page 24 of 59
    25. 25. Challenges: Sizing and Placement <ul><li>Screen shot of app with fixed size </li></ul>Page 25 of 59
    26. 26. Challenges: Sizing and Placement <ul><li>Dynamic sizes but not dynamically positioned </li></ul>Page 26 of 59
    27. 27. Challenges: Sizing and Placement <ul><li>Resized and repositioned </li></ul>Page 27 of 59
    28. 28. Customizing Views <ul><li>Customizing views per locale is the ultimate expression of localization </li></ul>How do you manage to have customized views per locale and not allow it to become a nightmare of custom builds and custom code? Page 28 of 59
    29. 29. Solutions <ul><li>So, how do you define an effective client side architecture for i18n and L10n application? </li></ul><ul><li>You need to start by separating meaning from display </li></ul><ul><li>For example, Unicode maps characters. It allows others to decide how those might appear on the screen </li></ul>Page 29 of 59
    30. 30. Number <ul><li>1 is a number, it represents a count of some abstract item. We can represent it a variety of ways but it has a known meaning: </li></ul><ul><ul><li>1 </li></ul></ul><ul><ul><li>1.0 </li></ul></ul><ul><ul><li>1,0 </li></ul></ul><ul><ul><li>1.00000000 </li></ul></ul><ul><ul><li>One </li></ul></ul><ul><ul><li>Uno </li></ul></ul>Page 30 of 59
    31. 31. Numbers <ul><li>Similarly 3 quarters of a whole has a meaning, regardless of presentation: </li></ul><ul><ul><li>.75 </li></ul></ul><ul><ul><li>¾ </li></ul></ul><ul><ul><li>0,75 </li></ul></ul>Page 31 of 59
    32. 32. Dates <ul><li>Dates also represent a point in time relative to another point in the past. While the choice of fixed point may vary from culture to culture the meaning of a date is the same: </li></ul><ul><ul><li>03/14/2010 </li></ul></ul><ul><ul><li>14/03/2010 </li></ul></ul><ul><ul><li>The fourteenth of March, year Two Thousand and Ten Anno Domini </li></ul></ul><ul><ul><li>29, Rabi' al-awwal ( ربيع الأول ) 1431 </li></ul></ul>Page 32 of 59
    33. 33. Reference Data <ul><li>Even non-simple types share the same trait. For example, the biological sex of an individual has a specific meaning which is conveyed regardless of the word used to describe it </li></ul><ul><ul><li>Male or Female </li></ul></ul><ul><ul><li>M or F </li></ul></ul><ul><ul><li>Macho o Hembra </li></ul></ul>Page 33 of 59
    34. 34. Meaning <ul><li>In all cases there is an underlying meaning which is being shown in one of a variety of ways </li></ul><ul><li>Understanding the meaning of data separate from the way it is shown or the way it is entered is a major part of the solution for client internationalization problems </li></ul>Page 34 of 59
    35. 35. Meaning <ul><li>In other words, we need to separate the idea of presenting the data from the meaning </li></ul><ul><li>This fits inline with the idea of a multi tiered approach to client-server architecture </li></ul><ul><li>..which fits in very well with my talk. </li></ul>Page 35 of 59
    36. 36. Tiers Page 36 of 59
    37. 37. Solving the problem <ul><li>The major focus of our i18n work is the presentation tier. </li></ul><ul><li>Storing and saving data with meaning in mind, and never with format </li></ul><ul><li>Relying on the presentation tier to format and interpret incoming format into raw data. </li></ul>Page 37 of 59
    38. 38. Why? <ul><li>Well, let’s consider the alternative </li></ul><ul><li>Does it make sense at the data level? </li></ul><ul><ul><li>Once data is stored with format it becomes a constant struggle to interpret it for different locales. However, your data layer needs to be capable of storing i18n info. </li></ul></ul><ul><li>Does it make sense at the logical level? </li></ul><ul><ul><li>The logical level should do operations on data. To me it is very important that the data is already normalized before the logical layer touches it. The biggest challenge is not messing it up here. </li></ul></ul>Page 38 of 59
    39. 39. Solutions <ul><li>This is where Adobe Flex plays a key role </li></ul>Page 39 of 59
    40. 40. Adobe Flex Primer <ul><li>Adobe Flex is a technology designed to build the presentation tier of rich Internet applications. </li></ul><ul><li>These applications resemble client server applications more than web applications </li></ul><ul><li>They are executed in a virtual machine on the client. </li></ul>Page 40 of 59
    41. 41. Adobe Flex Primer <ul><li>Flex is an open source framework </li></ul><ul><li>Flex encourages extension and re-composition, meaning that while there are many core Flex pieces available, you can reshape them as needed into a viable presentation layer for your product. </li></ul>Page 41 of 59
    42. 42. Adobe Flex Primer <ul><li>Flex applications can be deployed in two ways </li></ul><ul><li>Web: which means that Flash Runtime is the virtual machine </li></ul><ul><li>Desktop: which means that Adobe Integrated Runtime (AIR) is the runtime </li></ul>Page 42 of 59
    43. 43. Adobe Flex Primer <ul><li>Why use Flash Player? It’s a good runtime. </li></ul><ul><li>Some version of Flash Player is installed on 99% of the Internet connected personal computers in mature markets and still over 98% in emerging markets. </li></ul><ul><li>Currently, the penetration and update rate to the newest version is faster than any other runtime </li></ul>Page 43 of 59
    44. 44. Adobe Flex Primer <ul><li>Flex itself is a component framework which allows ease of assembling presentation tier user interfaces using XML markup. </li></ul><ul><li>Flex can be thought of as a domain specific language for creating user interfaces. </li></ul>Page 44 of 59
    45. 45. Adobe Flex Primer <ul><li>In that capacity, Flex has a specific philosophy which makes it extremely practical for our purposes </li></ul><ul><li>In Flex a developer creates views which automatically monitor and react to changes in an underlying data model. </li></ul>Page 45 of 59
    46. 46. Adobe Flex Primer <ul><li>That means that, in general, a Flex developer interacts with data. </li></ul><ul><li>The view of that data is represented by one or more classes and can vary without changing the underlying logic. </li></ul>Page 46 of 59
    47. 47. Adobe Flex Primer <ul><li>It is viable to say that, in Flex, the concepts of form and function are decoupled. </li></ul><ul><li>You can define the functionality of a component or view. That functionality can remain in tact regardless of how you choose to display it on the screen. </li></ul>Page 47 of 59
    48. 48. Adobe Flex Primer <ul><li>So, why does Flex make sense for an i18n application? </li></ul><ul><li>Because developers can interact with meaning. The formatting of that meaning becomes part of the view. </li></ul><ul><li>As the form and function are separate, you can have multiple, very distinct views of the same data without rewriting the functionality in any way </li></ul>Page 48 of 59
    49. 49. Adobe Flex Primer <ul><li>Let’s take a look at some of the specific tools available to the Flex developer which aid in this goal </li></ul>Page 49 of 59
    50. 50. Data Binding <ul><li>Data Binding is a key concept where the view monitors data for changes. </li></ul><ul><li>When a chance occurs, the view updates as in this simple Currency example </li></ul>Page 50 of 59
    51. 51. Measurement and Layout <ul><li>One of the biggest strengths of Flex is its ability to auto size and auto layout content. </li></ul><ul><li>This is a very quick example of dynamic layout </li></ul>Page 51 of 59
    52. 52. Property Files <ul><li>Flex allows you to define your externalized strings in property files. </li></ul><ul><li>Those property files can be added to a project at compile time or loaded at runtime as needed </li></ul>Page 52 of 59
    53. 53. Formatters and Validators <ul><li>As was briefly demonstrated with the data binding example, Flex has a rich set of extensible Formatters and Validators for display and data. </li></ul><ul><li>By default the formats for these controls are also controlled externally via properties files. They can be assembled together to achieve the separation of data versus presentation discussed here. </li></ul>Page 53 of 59
    54. 54. Unicode Support <ul><li>Internally Flex depends on the string storage capabilities of the Flash or AIR runtime. </li></ul><ul><li>All strings are internally stored as Unicode in UTF-16. </li></ul><ul><li>Flash Player can render and allow input of Unicode characters. It can also render any Unicode character to the screen </li></ul>Page 54 of 59
    55. 55. Rich Text Engine <ul><li>To that end, Flex has access to TLF (Text Layout Framework) that works with Flash Player 10.0 and above. </li></ul><ul><li>This layout framework allows rendering of Unicode characters, BiDirectional text and allows for the flowing of that text around other objects with intelligent wrapping </li></ul>Page 55 of 59
    56. 56. Collation <ul><li>As of version 10.1, Flash has native access to Unicode collation, however, even earlier version were able to use these features due to Flex’s inherent capability for extension. </li></ul><ul><li>Libraries exist that support locale specific collation with full configuration of the operation </li></ul>Page 56 of 59
    57. 57. Layout Mirroring <ul><li>Flex 4 will natively support layout mirroring, however, extensions already exist for earlier versions that allow full page flipping </li></ul><ul><li>Like most of the other Flex features, the burden is not placed on the application for this feature, but rather the framework itself </li></ul>Page 57 of 59
    58. 58. Component Skinning <ul><li>Component Skinning is the first place that one can truly begin to understand the message of form and function separation </li></ul><ul><li>When skinning a component or view it is possible to completely change anything visual about the component without ever changing the functionality </li></ul>Page 58 of 59
    59. 59. Contact Information [email_address] http://twitter.com/mlabriola Michael Labriola Senior Consultant Digital Primates Page 59 of 59