WHEN THE HECK IS 4/8/2016?

A K A J U S T O N E O F T H E M A N Y T H I N G S T H E Y N E V E R TO L D YO U A B O U T …

WHO THE HECK AM I?

• Developer Advocate for IBM

• MobileFirst, Bluemix, Cordova/PhoneGap, and web stuff in general

• Blogging at raymondcamden.com

• Tweeting at @raymondcamden• Author of "Apache Cordova in Action" and "Client-Side

Data Storage"

SLIGHTLY MORE COMPLICATED…

TIL

• America is one country

• There are other countries

• They use the Internet too!

BUT WAIT…

• They speak a different language (that's cool)

• They use a different unit of measurement (that's mostly cool too)

• "NASA lost a $125 million Mars orbiter because a Lockheed Martin engineering team used English units of measurement while the agency's team used the more conventional metric system for a key spacecraft operation..." (oh crap)

• They write numbers differently (that's just insane)

AN EXAMPLE…

1,000,000.99

1.000.000,99

1 000 000,99

4/8/2016

IS IT…

• April?

• August?

• It's my birthday – so you're both right!

PROBLEM

• Numbers change

• Currencies change

• Dates change

SOLUTION

• Pretend the rest of the world doesn't exist!

REAL SOLUTION

• Detect the locale of the device

• Format numbers/dates accordingly

• Pro Tip: You can't just format American money into a Euro.– 1$ ≠ 1€

GLOBALIZATION PLUGIN FTW

• https://www.npmjs.com/package/cordova-plugin-globalization

• cordova plugin add cordova-plugin-globalization• Supports numbers, currencies, and dates

• Supports getting information about locale/language

• Supports getting information about formats

• Even supports isDayLightSavingsTime – because that's still a thing apparently

JUST ADD IT!

• Yes, you just add the plugin and your magically done!

IDENTIFY CRAP TO UPDATE

• Check each view

• Look at the data

• Figure out what makes sense to localize

http://www.raymondcamden.com/2015/10/14/adding-localization-to-your-ionic-application-with-ibm-bluemix/

bankService.getAccountDetails().then(function(res) {$scope.bankAccount = res;

});

...

Total in account: ${{bankAccount.total}}Last Updated: {{bankAccount.lastUpd}}

bankService.getAccountDetails().then(function(res) {

//$scope.bankAccount = res;navigator.globalization.numberToString(

res.total, function(number) {$scope.bankAccount.total = number.value;

},function() {}, {type:'currency'});

navigator.globalization.dateToString(new Date(res.lastUpd), function(d) {

$scope.bankAccount.lastUpd = date.value;}, function() {}, { options });

});

OPTIONS

• For numbers:– decimal

– fraction

– currency (doesn't work in Browser)

• For dates:– formatLength: short, medium, long, and full

– "Apr 8, 2016 12:00 AM", "April 8, 2016 12:00 AM", "Fri, Apr 8, 2016 12:00 AM", "Friday, April 8, 2016 12:00 AM"

– selector: "date", "time", "date and time"

Changed Region (Locale) to France but kept language to English

Changed language to Frenchbut kept Region/Locale to US

Changed both region +language to French

WHAT TO DO?

• Currency seems inherently unsafe

• Given you use "X seashells" for country Y using the ** symbol – just format it as a number and use ** on display

WE'RE DONE!

• Nothing else can go wrong

• It's all downhill from here

• Rainbows and kittens and cookies for everyone!

WHAT ABOUT LOTS OF DATA?

PROMISES!

• Just promise the hell out of that crap!

• JavaScript Promises

• http://www.raymondcamden.com/2012/11/15/Testing-Globalization-Support-in-PhoneGap-22/

ALTERNATIVES – PART 1

• One of the many libraries out there

• Moment.js

• http://momentjs.com/docs/#/i18n/

ALTERNATIVES – PART 2

• Intl

• ECMAScript Internationalization API

• window.numberFormatter.format(n);

• http://code.tutsplus.com/tutorials/working-with-intl--cms-21082

• OMG AWESOME NO PLUGIN NO LIBRARY PERFECT!!!!!!!!!!!!!!11!!!!

• Let's check CanIUse.com

BUT WAIT…

• I'm an American (sorry)

• I'm in America (not sorry – woot!)

• I'm looking at an event in France

• How should the date be formatted?

• Best for me – obviously? Right?

• Anything you do automatically – treat with caution