Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Handling Data in YUI3
Upcoming SlideShare
Loading in...5
×

Handling Data in YUI3

4,600

Published on

An overview of how to work with data across its entire lifecycle: Retrieval, Parsing, Normalization and Display. Along the way, we'll cover various YUI 3 utilities and widgets which make working with data super-easy, such as Datasource, Dataschema, Datatype, Recordset, Datatable, Autocomplete & Charts. Working code will be provided.

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,600
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
40
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

  • I wanted to start off by just talking a bit about data. Its what drives the internet and it seems there’s more and more of it available.
  • YUI 3 has a rich set of utilities that make it easy for developers to handle this data. The end result is in the user having a great experience, without you having to break too much of a sweat.
  • There are usually 4 steps to take when working with data. YUI3 provides utilities that assist you at each of these steps.
  • There are usually 4 steps to take when working with data. YUI3 provides utilities that assist you at each of these steps.
  • There are usually 4 steps to take when working with data. YUI3 provides utilities that assist you at each of these steps.
  • There are usually 4 steps to take when working with data. YUI3 provides utilities that assist you at each of these steps.
  • There are usually 4 steps to take when working with data. YUI3 provides utilities that assist you at each of these steps.
  • There are usually 4 steps to take when working with data. YUI3 provides utilities that assist you at each of these steps.
  • There are usually 4 steps to take when working with data. YUI3 provides utilities that assist you at each of these steps.
  • this shows how all the utilities work together in YUI3.

    datasource gets data from a remote source.
    dataschema plugs into datasource to parse the data and uses datatype to normalize it.
    the normalized/parsed data is then consumed by a user facing widget
  • We will be talking about these utilities and how they come together with respect to the data lifecycle. We’ll be combining these utilities and showing some examples of data-driven apps using very few lines of code.

    Working with these utilities and ultimately managing your data is a piece of cake in YUI3
  • Retrieval: the process of getting data to your page.
  • This data could exist anywhere
  • The utility that can help you with this is called DataSource.



  • Subclasses of Y.DataSource. Get, IO, Local are 1kb each. Schemas are around 0.8kb each. Polling is 0.5kb, cache is 1kb. Function is 0.5kb
  • Subclasses of Y.DataSource. Get, IO, Local are 1kb each. Schemas are around 0.8kb each. Polling is 0.5kb, cache is 1kb. Function is 0.5kb
  • Subclasses of Y.DataSource. Get, IO, Local are 1kb each. Schemas are around 0.8kb each. Polling is 0.5kb, cache is 1kb. Function is 0.5kb
  • Subclasses of Y.DataSource. Get, IO, Local are 1kb each. Schemas are around 0.8kb each. Polling is 0.5kb, cache is 1kb. Function is 0.5kb
  • Subclasses of Y.DataSource. Get, IO, Local are 1kb each. Schemas are around 0.8kb each. Polling is 0.5kb, cache is 1kb. Function is 0.5kb
  • Subclasses of Y.DataSource. Get, IO, Local are 1kb each. Schemas are around 0.8kb each. Polling is 0.5kb, cache is 1kb. Function is 0.5kb
  • Subclasses of Y.DataSource. Get, IO, Local are 1kb each. Schemas are around 0.8kb each. Polling is 0.5kb, cache is 1kb. Function is 0.5kb






  • A simple DataSource being instantiated and fetching a request
  • loads the datasource roll-up on your page
  • Instantiate a new instance of a dataSource and give it a source to get data from
  • Pass in various requests to get data back from the given source. Create or pass in a callback object that has “success”, “failure” functions defined on it.
  • Pass in various requests to get data back from the given source. Create or pass in a callback object that has “success”, “failure” functions defined on it.
  • The events that can be hooked into for DataSource
  • The events that can be hooked into for DataSource
  • The events that can be hooked into for DataSource
  • The events that can be hooked into for DataSource
  • The events that can be hooked into for DataSource
  • The events that can be hooked into for DataSource
  • The events that can be hooked into for DataSource

  • On or After


  • Parsing: Taking all that data and only getting the pieces that are important to you






  • The left side is an example of the data we are getting back.
    Top right shows our schema definition.
    Bottom right shows our final object bag.
  • The left side is an example of the data we are getting back.
    Top right shows our schema definition.
    Bottom right shows our final object bag.
  • The left side is an example of the data we are getting back.
    Top right shows our schema definition.
    Bottom right shows our final object bag.
  • The left side is an example of the data we are getting back.
    Top right shows our schema definition.
    Bottom right shows our final object bag.
  • “key” corresponds with the key on the object bag we are working with.
    resultListLocator tells the schema where to find the array that it will iterate through.
  • For JSON/XML:

    metaFields
    Object
    Key/locator pairs that point to arbitrary data values.

    resultListLocator
    String
    Locator to an internal array of tabular data.

    resultFields
    Array
    Keys to assign to the values contained in the array.

  • Very similar to the standalone module.
  • Plug in the proper schema
  • Define the schema as you would normally
  • Define the schema as you would normally
  • Define the schema as you would normally
    The resultListLocator is from e.response.results
  • Define the schema as you would normally
  • YQL allows you to control incoming data so its probably not the greatest use case.
  • YQL allows you to control incoming data so its probably not the greatest use case.
  • YQL allows you to control incoming data so its probably not the greatest use case.
  • YQL allows you to control incoming data so its probably not the greatest use case.
  • YQL allows you to control incoming data so its probably not the greatest use case.
  • YQL allows you to control incoming data so its probably not the greatest use case.


  • Light blue: Numbers
    Yellow: Dates
    Orange: Strings

  • If you want to sort data, or perform any sort of arithmetic / comparison operations, having the data in its proper format will save you from tons of headaches.






  • DataType.Date.parse() will accept any arguments that can be accepted by the Date() object in JS. It will return a Date() object.

    DataType.Number.parse() will return a Number() object

    DataType.XML.parse() will accept a string representation of XML and return an XML document object. Note that browsers differ in their handling of invalid syntax but will in general return an XML document even under error conditions.
  • php.net/strftime
  • php.net/strftime
  • php.net/strftime
  • php.net/strftime
  • php.net/strftime
  • php.net/strftime
  • php.net/strftime
  • The module has support for a large number of languages built in. If you need a language that's not supported, you can register the necessary localized data yourself using facilities of theInternationalization utility. The resource bundle you provide needs to have properties corresponding to the locale-sensitive strftime format specifiers:
  • The module has support for a large number of languages built in. If you need a language that's not supported, you can register the necessary localized data yourself using facilities of theInternationalization utility. The resource bundle you provide needs to have properties corresponding to the locale-sensitive strftime format specifiers:
  • The module has support for a large number of languages built in. If you need a language that's not supported, you can register the necessary localized data yourself using facilities of theInternationalization utility. The resource bundle you provide needs to have properties corresponding to the locale-sensitive strftime format specifiers:

  • You can pass in strings “date”, “number”, “xml”, or the parser function (such as Y.DataType.Number.parse) or a custom function (such as parseDate)







  • Key things to mention here are the source and the parser









  • Creating a scrolling datatable. Map the columns to the
  • Creating a scrolling datatable. Map the columns to the
  • Taking the same data and plugging it into charts (Charts does not support DataSource yet)
  • Taking the same data and plugging it into charts (Charts does not support DataSource yet)
  • The data lifecycle, and why its important to have utilities at each step
  • Caching and polling of datasources.
    Handling values in their native types.
    Work with javascript objects with known properties
  • Caching and polling of datasources.
    Handling values in their native types.
    Work with javascript objects with known properties
  • Caching and polling of datasources.
    Handling values in their native types.
    Work with javascript objects with known properties
  • Caching and polling of datasources.
    Handling values in their native types.
    Work with javascript objects with known properties
  • Caching and polling of datasources.
    Handling values in their native types.
    Work with javascript objects with known properties
  • Caching and polling of datasources.
    Handling values in their native types.
    Work with javascript objects with known properties
  • Caching and polling of datasources.
    Handling values in their native types.
    Work with javascript objects with known properties
  • Caching and polling of datasources.
    Handling values in their native types.
    Work with javascript objects with known properties
  • Caching and polling of datasources.
    Handling values in their native types.
    Work with javascript objects with known properties
  • Caching and polling of datasources.
    Handling values in their native types.
    Work with javascript objects with known properties
  • There are other utilities that you should look into when dealing with data.
    - Y.io
    - Y.YQL
    - Y.jsonp

  • There are other utilities that you should look into when dealing with data.
    - Y.io
    - Y.YQL
    - Y.jsonp



    1. Gostou de algum slide específico?

      Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

    ×