Posted on:November 12, 2012 at 01:13 PM

jQuery Conference Asia

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

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 = ""

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'''
  • 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
<ul data-role="listview" data-theme="a"></ul>
  • themeroller website
    • easy to build the website
    • 26 swatches
  • themeroller demo
  • 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
// 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
// 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

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
jQuery
jQuery Asia Conference

Popular

Latest

Category

Tag Cloud

c
svn
python
3d
ruby-on-rails
machine-learning
kubernetes
webgl
opengl
mfc
mysql
postgres
trac
dreamhost
wipi-c
gdc
php
subversion
hlsl
shader
docker
gcp
cpp
giga
siggraph
webvr
cg
glsl
syntax-highlight
visual-studio
cgfx
mac
unity3d
maya
ui
nlp
react
redis
parquet
ubuntu
sk-telecom
unity
mobile
jquery
high-performance-computing
digital-content-creation
google-maps
rabbitmq
argo
snowflake
data-engineering
big-data
reactjs