jQuery Conference Asia


jQuery Conference Asia

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

The state of jQuery

jQuery Core

jQuery UI

jQuery Mobile

Community

In-depth look at the mechanics of mobile app framework

jQuery Mobile

<script src <link </code> * Anatomy of a page

header

<
* Multiple Pages in one file

Page 1

Next Page

Page 2</h2></div>
foo
</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
* 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 // 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 ## * 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 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 ## * ## 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 *