Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
About Me
www.maggiepint.com
@maggiepint
maggiepint@gmail.com
var a = new Date('2016-01-04');
a.toString();
" Sun Jan 03 2016 16:00:00 GMT-0800 (PST) "
var a = new Date('1/4/2016');
a....
Brokens!
1. UTC and Local Context Switches
2. NoTime Zone Support
3. Parsing (all of it)
• The spec is a disaster
4. Forma...
MOMENT.JS
Quality Date andTime in Javascript
Facts
• Primary Date andTime Library for JavaScript
• Community Based
• 5Years Old
• 5 Core Maintainers and 1 Author Emeri...
FIXING DATE
10 Days for aWhole Language
BROKEN 1: UTC AND
LOCAL
5 O'clock Somewhere
PERSPECTIVE
We all see dates and times from different angles
The GlobalTimeline
1 2 3 4 5 6 7 8 9
Point in absolute time
Coordinated UniversalTime (UTC)
• A perspective of the global timeline
• Allows us to keep track of absolute time
• Primar...
LocalTime
• A local time is a perspective of time
• It does not represent a point on the global timeline
• It is usually n...
UTC Time:
2016-04-09T14:17:47Z
What we know
• The point in absolute time
• Whether this time is before or after
another po...
LocalTime:
Saturday,April 9, 2016 9:11 AM
We Know
• It is Saturday
• It is morning
We Don’t Know
• What point this is on t...
var a = new Date(Date.UTC(2016,0,1));
a.setUTCDate(3);
a.toISOString(); //if you want local, must use different function
/...
BROKEN 2:TIME ZONES
There’s no support in Date. Does it matter?
Time Zone Basics
• A time zone is a region that observes a uniform standard time
• A time zone is defined by a set of offs...
Time Zone: America/Chicago
Politics
• Time zones are inherently political
• Governments change time zones regularly
• Governments change time zones s...
Time Zones are not Offsets!
"2016-04-09T19:39:00-05:00“
This date could be in:
• America/Chicago
• America/Bahia_Banderas
...
Time Zones (With MomentTimeZone)
moment.tz('2016-04-25T02:30:00Z', 'America/Los_Angeles').format()
"2016-04-24T19:30:00-07...
BROKEN 3: PARSING
It’s really, really, really broken
Parsing
• JavaScript date will not reliably parse any format
• It tries to reliably parse ISO8601 ("2016-01-03T00:00:00.00...
var a = new Date('2016-01-04');
a.toString();
" Sun Jan 03 2016 16:00:00 GMT-0800 (PST) "
var a = new Date('1/4/2016');
a....
moment('2016-12-21T13:25:22').format()
"2016-12-21T13:25:22-06:00"
moment('30/04/2016', 'DD/MM/YYYY').format()
"2016-04-30...
BROKEN 4:
FORMATTING
Your UX person just CAN’T DEAL
Formatting
• JavaScript Date offers very limited formatting options
• .toString
• .toDateString
• .toLocaleString
• .toLoc...
moment().format('MM/DD/YYYY')
"04/26/2016"
moment().format('MMMM D, YYYY hh:mm a')
"April 26, 2016 09:26 pm"
moment().form...
moment().format('LLL')
"April 26, 2016 9:28 PM"
moment().format('L')
"04/26/2016"
moment().locale('en-gb').format('L')
"26...
BROKEN 5: MATH
There are bad APIs, and then there are BAD APIs
Math
• JavaScript Date APIs for Math are very bare-bones
• This frequently causes unintuitive and wrong code
• Moment incr...
As Seen on Stack Overflow
var startHours = 8;
var startMinutes = 30;
var ed = new Date();
var endHours = ed.getHours();
va...
moment().diff(moment(’08:30’, ’HH:mm’), ’minutes');
As Seen on Stack Overflow:With Moment
var a = new Date();
a.setDate(a.getDate() - 5);
moment().subtract(5, 'days');
var d = new Date();
var diff = d.getDate() - d.getDay() + (day == 0 ? -6:1);
d.setDate(diff);
d.setHours(0,0,0,0);
moment(...
var d1 = new Date();
var d2 = new Date(‘01/01/2016’);
var months;
months = (d2.getFullYear() - d1.getFullYear()) * 12;
mon...
moment('2016-03-12 12:00').add(1, 'day').format('LLL')
"March 13, 2016 12:00 PM"
moment('2016-03-12 12:00').add(24,'hour')...
moment('2016-02-28').add(365, 'days').format('LLL')
"February 27, 2017 12:00 AM"
moment('2016-02-28').add(1, 'year').forma...
moment('2016-01-01').add(1.5, 'hours').format('LLL')
"January 1, 2016 1:30 AM“
moment('2016-01-01').add(1.5, 'days').forma...
Time Math vs Date Math
Time math:
• Refers to operations involving hours, minutes, seconds, milliseconds
• Works by increm...
THE FUTURE
We don’t have a DeLorean
Roadmap
• V3
• New Build Process
• Immutability
• V4
• Modularity
• Internal refactor of time zoneAPIs
TC39 Collaboration
• Working with BrianTerlson to create a new DateTime API in JavaScript
• Favoring basing API on the Jod...
Find Us!
• www.momentjs.com
• @momentjs
• @timtamiam –Tim Wood (Author)
• @maggiepint – Maggie Pint
• @mj1856 – Matt Johns...
MomentJS at SeattleJS
MomentJS at SeattleJS
Upcoming SlideShare
Loading in …5
×

MomentJS at SeattleJS

580 views

Published on

Talk on date and time in JS and the future of the Moment.js library.

Published in: Technology
  • Hello! Who wants to chat with me? Nu photos with me here http://bit.ly/helenswee
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

MomentJS at SeattleJS

  1. 1. About Me www.maggiepint.com @maggiepint maggiepint@gmail.com
  2. 2. var a = new Date('2016-01-04'); a.toString(); " Sun Jan 03 2016 16:00:00 GMT-0800 (PST) " var a = new Date('1/4/2016'); a.toString(); " Mon Jan 04 2016 00:00:00 GMT-0800 (PST) "
  3. 3. Brokens! 1. UTC and Local Context Switches 2. NoTime Zone Support 3. Parsing (all of it) • The spec is a disaster 4. Formatting 5. Math APIs
  4. 4. MOMENT.JS Quality Date andTime in Javascript
  5. 5. Facts • Primary Date andTime Library for JavaScript • Community Based • 5Years Old • 5 Core Maintainers and 1 Author Emeritus • All part-time, unpaid • No Corporate backing • 28,157 Stars • 3,961 Forks • 6,676,292 NPM Downloads In the Last Month • 10th Most Depended Upon NPM Package
  6. 6. FIXING DATE 10 Days for aWhole Language
  7. 7. BROKEN 1: UTC AND LOCAL
  8. 8. 5 O'clock Somewhere
  9. 9. PERSPECTIVE We all see dates and times from different angles
  10. 10. The GlobalTimeline 1 2 3 4 5 6 7 8 9 Point in absolute time
  11. 11. Coordinated UniversalTime (UTC) • A perspective of the global timeline • Allows us to keep track of absolute time • Primary standard by which the world regulates clocks • Defined precisely by scientific community • Has no relationship to geography
  12. 12. LocalTime • A local time is a perspective of time • It does not represent a point on the global timeline • It is usually not a contiguous timeline (DST)
  13. 13. UTC Time: 2016-04-09T14:17:47Z What we know • The point in absolute time • Whether this time is before or after another point in time What we don’t know • Whether it is morning or night • What day of the week it is
  14. 14. LocalTime: Saturday,April 9, 2016 9:11 AM We Know • It is Saturday • It is morning We Don’t Know • What point this is on the global timeline • Whether it is before or after a time from a different locality • What the time will be if we add one hour to this time
  15. 15. var a = new Date(Date.UTC(2016,0,1)); a.setUTCDate(3); a.toISOString(); //if you want local, must use different function //"2016-01-03T00:00:00Z" moment.utc(‘2016-01-01’).date(3).format(); //"2016-01-03T00:00:00Z"
  16. 16. BROKEN 2:TIME ZONES There’s no support in Date. Does it matter?
  17. 17. Time Zone Basics • A time zone is a region that observes a uniform standard time • A time zone is defined by a set of offsets from UTC • Offsets are typically in one hour intervals, but not always • Nepal StandardTime is UTC +5:45 • Time zones frequently have multiple offsets • There are two main resources for time zones • Internet Assigned Numbers Authority (IANA) • WindowsTime Zones • IANA time zones are more widely used, and more accurate
  18. 18. Time Zone: America/Chicago
  19. 19. Politics • Time zones are inherently political • Governments change time zones regularly • Governments change time zones suddenly • In 2016 Egypt decided to do DST 3 months ahead of time, and cancelled it 2 weeks ahead of time • The actual time on computers was erratic • Morocco has 4 transitions due to Ramadan • Assume nothing
  20. 20. Time Zones are not Offsets! "2016-04-09T19:39:00-05:00“ This date could be in: • America/Chicago • America/Bahia_Banderas • America/Bogata • America/Cancun • America/Cayman • And more
  21. 21. Time Zones (With MomentTimeZone) moment.tz('2016-04-25T02:30:00Z', 'America/Los_Angeles').format() "2016-04-24T19:30:00-07:00" moment.tz('2016-04-25T02:30:00Z', 'Europe/Berlin').format() "2016-04-25T04:30:00+02:00"
  22. 22. BROKEN 3: PARSING It’s really, really, really broken
  23. 23. Parsing • JavaScript date will not reliably parse any format • It tries to reliably parse ISO8601 ("2016-01-03T00:00:00.000Z”) but fails • The rules for ISO8601 are completely unintuitive • “When the time zone offset is absent, date-only forms are interpreted as a UTC time and date- time forms are interpreted as a local time.”
  24. 24. var a = new Date('2016-01-04'); a.toString(); " Sun Jan 03 2016 16:00:00 GMT-0800 (PST) " var a = new Date('1/4/2016'); a.toString(); " Mon Jan 04 2016 00:00:00 GMT-0800 (PST) " var a = new Date('2016-01-04T00:00:00'); a.toString(); " Sun Jan 03 2016 16:00:00 GMT-0800 (PST)” //Chrome “Mon Jan 04 2016 00:00:00 GMT-0800 (PST)” //Firefox
  25. 25. moment('2016-12-21T13:25:22').format() "2016-12-21T13:25:22-06:00" moment('30/04/2016', 'DD/MM/YYYY').format() "2016-04-30T00:00:00-05:00" moment('February 25, 2016', 'MMMM DD, YYYY').format() "2016-02-25T00:00:00-06:00" moment('octubre 25, 2016', 'MMMM DD, YYYY', 'es').format() "2016-10-25T00:00:00-05:00"
  26. 26. BROKEN 4: FORMATTING Your UX person just CAN’T DEAL
  27. 27. Formatting • JavaScript Date offers very limited formatting options • .toString • .toDateString • .toLocaleString • .toLocaleDateString • .toLocaleTimeString • .toLocaleFormat • .toISOString
  28. 28. moment().format('MM/DD/YYYY') "04/26/2016" moment().format('MMMM D, YYYY hh:mm a') "April 26, 2016 09:26 pm" moment().format('YYYY-MM') “2016-04”
  29. 29. moment().format('LLL') "April 26, 2016 9:28 PM" moment().format('L') "04/26/2016" moment().locale('en-gb').format('L') "26/04/2016" moment().locale('ar').format('LLL') "٢٦‫أبريل‬ ‫نيسان‬٢٠١٦٢١:٣١"
  30. 30. BROKEN 5: MATH There are bad APIs, and then there are BAD APIs
  31. 31. Math • JavaScript Date APIs for Math are very bare-bones • This frequently causes unintuitive and wrong code • Moment increases your ability to write readable code
  32. 32. As Seen on Stack Overflow var startHours = 8; var startMinutes = 30; var ed = new Date(); var endHours = ed.getHours(); var endMinutes = ed.getMinutes(); var elapsedMinutes = (endHours * 60 + endMinutes) - (startHours * 60 + startMinutes); console.log(elapsedMinutes);
  33. 33. moment().diff(moment(’08:30’, ’HH:mm’), ’minutes'); As Seen on Stack Overflow:With Moment
  34. 34. var a = new Date(); a.setDate(a.getDate() - 5); moment().subtract(5, 'days');
  35. 35. var d = new Date(); var diff = d.getDate() - d.getDay() + (day == 0 ? -6:1); d.setDate(diff); d.setHours(0,0,0,0); moment().startOf('week')
  36. 36. var d1 = new Date(); var d2 = new Date(‘01/01/2016’); var months; months = (d2.getFullYear() - d1.getFullYear()) * 12; months -= d1.getMonth() + 1; months += d2.getMonth(); var diff = months <= 0 ? 0 : months; moment().diff('2016-01-01', 'months');
  37. 37. moment('2016-03-12 12:00').add(1, 'day').format('LLL') "March 13, 2016 12:00 PM" moment('2016-03-12 12:00').add(24,'hour').format('LLL') "March 13, 2016 1:00 PM"
  38. 38. moment('2016-02-28').add(365, 'days').format('LLL') "February 27, 2017 12:00 AM" moment('2016-02-28').add(1, 'year').format('LLL') "February 28, 2017 12:00 AM" Assuming there were 365 days in a year caused every 30GB Zune to break on December 31, 2008
  39. 39. moment('2016-01-01').add(1.5, 'hours').format('LLL') "January 1, 2016 1:30 AM“ moment('2016-01-01').add(1.5, 'days').format('LLL') "January 3, 2016 12:00 AM"
  40. 40. Time Math vs Date Math Time math: • Refers to operations involving hours, minutes, seconds, milliseconds • Works by incrementing or decrementing the position on the global timeline by the number of units in question • Can use fractional units Date Math: • Refers to all operations larger than hours – days, months, years, quarters, etc. • Works by moving places on the calendar • Cannot be converted to time math • Cannot use fractional units
  41. 41. THE FUTURE We don’t have a DeLorean
  42. 42. Roadmap • V3 • New Build Process • Immutability • V4 • Modularity • Internal refactor of time zoneAPIs
  43. 43. TC39 Collaboration • Working with BrianTerlson to create a new DateTime API in JavaScript • Favoring basing API on the JodaTime family of Date APIs • Hope to port Moment to live on top of the new API when it is available
  44. 44. Find Us! • www.momentjs.com • @momentjs • @timtamiam –Tim Wood (Author) • @maggiepint – Maggie Pint • @mj1856 – Matt Johnson • @icambron – Isaac Cambron • Iskren Chernev • Lucas Sanders

×