jQuery Conference Asia

jQuery Conference Asia

  • Nov 12, 2012 9:30 ~ 6:00pm
  • Renaissance Hotel 3nd floor

http://jqueryasia.sales.onoffmix.com/

  • The state of jQuery 9:30~10:10 Richard D. Worth
  • In-depth look at the mechanics of mobile app framework 10:10~10:50 Ralph Whitbeck
  • HTML5 and New Era 11:00~11:40 이원석
  • jQuery Mobile: Common Pitfalls and Gotchas Alex Schmitz
  • Case Study: DataBinding with Knockout.JS Responsive UI with DaVinch 도창욱
  • Getting In Sync with Async Dan Heberden
  • The new hotness in jQuery UI Kris Borchers
  • Ask Julian about XHR Julian Aubourg
  • How to develop HTML5 authoring tool 최윤호
  • jQuery Animation Corey Frang

The state of jQuery

  • Richard Worth
  • 2nd international conference, 1st in Asia,
  • jQuery -> library…
  • jQuery Core
  • jQuery UI
  • jQuery Mobile
  • Community
    • Korea -> please join the community
  • Team
    • 7 years 1000 contributors
    • 50 active team members

jQuery Core

  • write less, do more
  • very caution on make it small
  • 250 functions -> only 50 functions v1.8 only use 50 functions
    • modular programming
  • custom build of the jquery and only use the one that you use
  • what’s new in v1.8
    • rewrote Sizzle : css selector enginge
    • animations:
    • CSS Vendor prefixing for you
      • -webkit, -moz-, -o- only use css prefix, it will work for it through jQuery
  • What’s next v1.9
    • more modularity
    • in 2 months
  • what’s next v2.0
    • will support two versions
    • v2.0 will drop the support of older IE (older IE -> supported will be v1.9)
    • library will be smaller
    • 1.9 and 2.0 API wil be the same

jQuery UI

  • 1 release per month
  • oct 2012 v1.9 release
  • menu, tooltip,
  • api redesign
  • Widget factory
  • New website
    • download builder -> allow you to build the custom version of jQuery
  • Theme Roller
  • api.jqueryui.com
    • categories of components
    • overvews and example demo
    • easy rest api -> api/accordion#events
    • version number support to -> api/accordion#events

jQuery Mobile

  • 2 years
  • v1.2 new popup widget

Community

  • jQuery Mobile Contries South Korea #1
  • Top 50 JavaScripts
    • 25 are jQuery
  • plugins.jquery.com -> help to find the new plugins and libraries that’s supported by
    • libries that’s built on top of jQuery
  • Learning
    • javascript vs jQuery
    • learn.jquery.com (later nov)
    • getting started with java script /
    • github.com/jquery (later next jan) -> authoring new website
  • jQuery Foundation
    • W3C -> HTML, CSS, DOM
    • ECMA (TC-39) -> javascript and javascript standard
  • we can be the voice of the
  • Yehuda Katz, Rick Waldron -> working hard with the community
  • Membership Program
    • founding member:
    • gold member: blackberry, adobe, intel, apigee
    • silver member:
    • individual members: stickers and buttons t-shirts, hoodies, bags
    • [email protected]
  • contributions
    • gituhub.com/jquery
    • forum.jquery.com
    • irc.jquery.com
    • jquery.org/meetings
  • translations

In-depth look at the mechanics of mobile app framework

  • Ralph Whitebech
  • jQuery Board Memeber
    • director of Professional Service .appendTo
  • Project Lead for jQuery Mobile Cookbook
    • http://jquerymobilecookbook.com

jQuery Mobile

  • Graded Device Support
    • A Grade : full enhanced experienced with ajax-based animated page transitions
    • B rade : enhanced experience without Ajax naviation
    • C Grade
  • Getting Started
<code>
<html>
<head>
  <meta name="viewport" contents="width=device-width, inital-scale=1">
  <link href="http://jquerymobile/">
  <script src 
<link

</code>
  * Anatomy of a page
<code>
<div data-role="page">
  <div data-role="header"><h1>header</h1>
  </div>
  <

</div>
</code>

  * Multiple Pages in one file
<code>
<div id="page-1" data-role="page">
  <div data-role="header"><h1>Page 1</h1></div>
  <div data-role="content">
    <a href="#page-2" data-role="button">Next Page</a>
  </div>
</div>

<div id="page-2" data-role="page">
  <div data-role="header"><h1>Page 2</h2></div>
  <div data-role="content">foo
</div>
</code>
  • Adding Components
    data-role = "controlgroup"
    data-role = "button"
    data-role = ""
    
  • http://jquerymobile.com/docs => jquery mobile documentation site

State of the project

  • release milestonse
    • 1.0.0 => 23011 nov
    • 1.0.1 = 2012 jan
    • 1.2.0
  • popularity
  • regional popularity
    • s.korea, india, hong kong, japan, taiwan, singpore,
    • seodul, didmato, dbangalore, chenakdi,m shdidnjdijdj
  • thriving ecosystem
    • phonegap, codiqa, vizapps, handheld designer
  • jQuery Mobile v1.2.0
    • new popup widget
    • new auto dividers in listview mode
    • collapsable listviews are now supported
    • a download builder (alpha)
  • Adding a popup
    • data-role = popup
  • popup menu
  • collapse menu
  • popup form
  • positioning
    • data-position-to=”window”
  • Overlay Stlying
    • background of the popup but overlays the page
    • data-overlay-theme=”a”
  • Dialog => combine both data attribues
    • dialog in jquery mobile -> several pages. not suitable
    • this dialog is on the same page
    • download builder => testing only
  • Roadmap
    • jqeury m v1.3
      • responsive table
      • jquery UI convergence
      • new api/demo docs
      • eta (end of year)
    • jquery m v1.4
      • scrolling region utility
      • new tab widget (based on jQuery UI)
      • eta mar, apr 2013
  • demo ‘'’responsive table’’’
    • http://jquerymobile.com/branches/tables/docs/tables/table-reflow.html
    • transform to
  • Themes
    • theming overview
    • uses CSS3 properties
    • multiple color ‘swathes’
    • sprited icon set
    • default theme ome with 5 swatches a-e
    • if no swatch
  • mixing swatches ```html
* themeroller website
  * easy to build the website
  * 26 swatches
* themeroller demo
  * http://jquerymobile.com/themeroller/index.php
  * adobe kuler => color scheme
  * download theme as a zip file
  * import the the file and mix and match
* Third party themes
  * jquery mobile blackberry 1.0 theme
  * iOS Theme
  * Windows phone 7.5 Metro Theme 
  * Codova widgit
* jqmgallery.com => to get inspired
  * how the other companies are using it
* plugin integrations
  * third part plugins
  * adding a plugin is easy
  * link => jquery.css
    link => your css
    link => jqeurymobile.js
    link => your lib.js
* Widget Factory
  * all internal widgets uses jQuery UI Widget Factory
  * provides a template for code organization
  * exposes all oeprations
* Auto initialization
  * uses should add CSS/JS and markup to page and 'it just work'
  * to auto initialize:
    * bind to pagecreate and create evnets
    * call plugin on 
```html
// in css
options: {
  initSelector: ":jqmData(role='newplugin')"
}

// in widget, binding
$(document).bind("pagecreate create", function(e)){
  $.mobile.listview.prototype.
}
  • namespacing
    • plugin should work with namespaced attribues
    • global namespace override that sets a namespaces
    • test that plugin works with both data-attributes
      // to set a namespace
      $(document).bind("mobileinit", function(){
      $mobile.xxxx  
      }
      
  • Theme framework
    • use internal plugins as a guide on
    • aplly the stackable theme frameowrk classes to your plugin
      • more info:
    • if swatch data-attribute is not set have widget inherit from the parent
  • Semantics
    • use HTML5 and better semantics
    • this makes it easier for selecting and parsing
    • in some ase
  • Accessiblity
    • ARIA attribues
    • tes on screen readers like IOS
  • Unit Test
    • have solid test coverage
    • jquery m uses qUnit for their test suite
    • see the example on the website
  • jqm and backbone.js
    • backbone.js => single page
    • do work together.
    • some tricks to work together
    • some tips
      • disable jqm’s page navigation
      • git hub link -> complete app link
    • prepping jqm ```html // 4 lines in sample code to disable jqm’s page navigation

// remove page from DOM

* jqm and cordova(phonegap)
  * build native apps
    * android, windows8, beta ...
  * cross domain issues
    * file:// load is thinking accessing from remote is consider a corss-domain requests
    * it's a blocker
    * can set the jq boolean variable $.support.cors to true
    * $.mobile.allowCorss 
  * some times
    * use local copy of jqm
    * disable pushstate feature on installed apps
    * avoid using _ in the files and folders => known issues with phonegap and andorid
* qna
  * how to set the roadmap
    * meeting
    * explore the github
    * more of what can be done on what time
  * plan for the table bigger than 10'' more
  * scrolling region in android. painful. fixing in 1.4?
    * github, roadmap link, link to the prototype. talk to high 

## HTML5 and New Era of Web OS ##
* WebOS 
  * HP OS 실패함.
  * Web OS -> firefox OS, samsung intel -> tize?, Qualcomm -> ???
* 투자가 많다. 현재 트랜드
* facebook zuckerberg's biggest mistake? => betting on html5?
* jit을 못쓰면 iOS에서 못쓰게 한다. hybride application을 늦리게 된다.
* apple이 binary에 대한 검사를 한다.
* hybride appliction은 코드를 실시간으로 컴파일을 하니까. iOS에서는 못쓰게 했다. 그래서 facebook에서 느려지니까. 많이 욕을 먹었다.
* 여러 상황이 겹쳐서 이야기가 흘러갔다.
* Maya2012: OpenWeb platform is here: W3
  * 2.1 billion mobile device browsers by 2016. 모바일도 HTML5를 지원하는 환경이 많다.
  * 35% of top 100 sites
  * 75% of web developers
  * number 1 job trend
* Gartner
  * 2013, 2014 기업앱시장의 주류가 될 것이다.
  * magic quandrant for mobile application development
  * 2015년까지 개발되는 모바일앱의 80%가 hybrid또는 모바일 웹 중심이 될것이다.
* Gartner 2014 tech trend
  * mobile devices battles
* What's HTML5?
  * 협의: html5라는 이름의 표준
  * 광의: open web platform
* WebOS
  * TIZEN
  * HP WebOS -> opensource
  * Firefox OS
  * Chrome OS
* Firefox OS
  * pure web runtime on top of linux
  * application -> built with html, css, js
* Tizen Architecture
  * still evolving
  * 성능이라든지 몇가지 잘 할 수 있느냐?
  * firefox는 다 웹 어플로 하는데
  * 현재까지의 아키텍쳐는 .. 코어레이어는 플랫폼
  * 웹프레임웍은 W3C기반의 표준 api, 
  * device api => tizen specfic api
  * 비표준, 표준
    * stken.com -> 5글자 있네?
* firefox OS
  * gaia
  * gekko
  * gonk
* firefox OS Web API
  * web telephony
  * vibration api
  * websms
  * idle api
  * screen orientation
  * settings api
  * resources lock api
  * power management api
  * mobile connection api
  * tcp socket api
  * udp datagram socket api
  * sensor api
  * wifi api
  * device storage api
  * usb file reading api
  * contacts api
  * camera api
  * peer to peer api
  * mouse lock api
  * open web apps
  * web nfc
  * web bluetooth
  * webusb
  * network
  * battery status
  * http-cache api
  * alarm api
  * browser api
  * time/clock api
  * calendar api
  * intents/activities/actions
  * device
  * keyboard/ime api
  * spellcheck api
  * background api
* System Applications WG
* Conclusion
  * HTML5/Open Web Platform
    * protablility를 지원하는 네이티브 앱 수준의 앱개발이 가능한 플랫폼
    * 설치없이 항상 최신버전 실행
    * 모바일 TV,
* 내년에 웹OS가 설치된 어플들이 나온다.

## jqm: pitfalls and gotchas =##
* alex shumits
* www.uglymongrel.com/jqueryasia
* irc, forum 
* seriously cross-platform with HTML5
* ios, android, bada, 
* most general prolems in 3 categories
  * page events & the ajax nav model
  * dynamic contents and widgets
  * device bugs => too big issue, will not be addressed in here
* jqm doesn't support multi page ajax
* read the presentation. case => solution

## knock.js & davinci ##
* 

## Getting in sync with async ##
* Dan Heberden
  * <http://danheberden.com>
  * <http://api.jquery.com/category/deferred-object/>
* Pretty typical ajax request
* have to wait for it to get the value, otherwise it's 'unknown'
* callback
  * hard to manage
  * decoupling hell
  * we need something that manages our callbacks
  * meet $.Deferred
  * is a object that holds, success callbacks, holds
```html
var dfd = $.Deferred();
  • APIs
    • done
    • fail
    • then
    • always
    • resolve
    • resolve with
    • promise
  • sample
    • done and fail
      dfd.then(
      function(data))
      
  • check the promise is rejectd
  • chaning goodness
  • late to the gate:
  • callback can be added later
  • promise/A
  • $.ajax returns a jqXHR which has a promise built-in

  • nostalgia included
    • .success
    • .error
    • don’t ever use it, just forget.
  • create a iframe()
    • createIframe()
    • createIframe().done
  • Being Lazy
    • $.when magic
  • cache anyone?
  • $.fn.animate’s callback
  • $.when too
    • $.when()

What’s hot in jQuery

  • Kris Borchers
  • jQuery UI 1.9 finally
  • Ticket Active
    • new tickets, open tickets, new tickets
  • ticket triaging
    • since v1.9
    • ~> 75% closed by 5 ppl (mike 30%)
  • API redesigns

Ask Julian about XHR

  • Julian

How to make html5 authoring tool

  • frameworks
    • lungo js
    • kendo ui
    • jquery ui, mobile
    • utlimate css
    • slides, presentation with html
  • 일반 HTML을 저작도구안에서 보여줘야 한다.
    • QT Webkit을 기반으로 만들게 된다. Web enginge
    • HTML source -> Rum-time DOM so big
    • Design-time UI
COMMENTS
Related Post