To show the trend for Web

I hope you think web
as application platform

Please give WAC IDE team feedback!

All documentation is at Wiki and Website

8 technologies

New features let you:

• Inter-operability between browsers
• Compatibility with HTML 4.01
• Productivity for web developers
• Rich Web like multimedia and offline storage

 - <t lang="fr">je ne sais quoi</t>
 - <time datetime="2011-09-20">a tuesday</time>
 - <meter min="0" max="100" value="75"></meter>
 - <progress value="33" max="100">
    <span id="p">33</span>%
   </progress>

<input type="number">

<input type="range" min="1" max="5" value="3"> *

<input type="date">

<input type="email" placeholder="1@abc.com" required autofocus>

<input pattern="[a-zA-Z]{4,6}">

More features... | HTML5 input element

<video src="http://www.tools4movies.com/trailers/1012/Iron%20Man%203.mp4"
     controls>
  <div class="no-html5-video"></div>
</video>

• Application Cache*
  • Offline browsing: Gmail Offline
  • Performance: Twitter’s mobile web app delivers performance
  • Decreasing server load
• Web Storage (1)
  • localStorage*: Try It!

    localStorage.setItem("name", "Hello World!");

  • sessionStorage

• Web Storage (2)
  • Web SQL Database

    var db = window.openDatabase("TestDB", "1.0", "Test DB", "2*1024*1024");
    db.transaction(function (tx) {
      tx.executeSql('CREATE TABLE works(subject, memo)');
      tx.executeSql('INSERT INTO works(subject, memo) VALUES ("Item1", "Memo1")');
    });

  • GeoLocation

    void navigator.geolocation.getCurrentPosition(
        successCb, errorCb, options);
    long navigator.geolocation.watchPosition(
        successCb, errorCb, options);
    void clearWatch(watchID);
    
    function show_position(position) {
      // position.coords.latitude, position.coords.longitude

• Play Galaxy lite!

• canvas.getContext('2d').drawImage(sprite_image, ...);

  

• Configuring behavioral options or associating content enhancements
• Treated as a storage area for private data (private in the sense that the end user can't see it - it doesn't affect layout or presentation).
  하이브리드앱 아키텍쳐 및 개발 사례

  <button><span data-nls="common.back">Back</span></button>

  $.get('locales/'+lang+'/messages.json',function(messages){
          $.each(document.body).find(‘*[data-nls]’).each(function(index,node){
          var key=node.attr(‘data-nls’);
          var message=messages[key];
          node.html(message);

  jQuery Mobile Data- attribute reference

• Table code is complex and required some images
• CSS3 provides just a simple property!

  <style>
  .rounded {
      border-radius:8px;
  }
  </style>
  
  <div class="rounded" />
      

linear
ease-in
ease-out
ease-in-out
cubic-bezier(0.9, 0.1, 0.1, 0.9);

• Mobile Viewport Declaration

  <meta name="viewport" content="width=device-width" />

• CSS3 Media Queries
  • Resolution dependent layout
  • Example: html5rocks.com with Safari
• Optimization
  • Amazon SILK
• Contextual Data

• native WITH Web
  • 모바일웹 담은 새 '네이버' 앱
  • unscientific research

    dion@laptop $ grep UIWebView *.ipa |wc -l
    205
    dion@laptop $ ls -al *.ipa |wc -l
    415

• Web deployment model
  • A/B testing
  • Constantly changing UI

• Global variables
• No block scope

  function test() {
      var1 = "inner";
  }
  
  test();
  alert(var1);

• The with block
• Deal with the == operator

  2 === "2"; // false - obviously a number is not a string
  2 == "2";  // true

• Semicolon

• Douglas Crockford
  • Discovered Good Parts
  • The World's Most Misunderstood Programming Language
    • Myths and Truths
      • It is subset of Java (It's name is Java-)
      • It is not object-oriented (It doesn't have class)
      • Many design errors, Lousy Implementations, Amateurs

jQuery: "The Write Less, Do More" JavaScript Library *

• DOM Scripting, AJAX, UI Effects

  var external_links = document.getElementById('external_links');
  var links = external_links.getElementsByTagName('a');
  for (var i=0;i < links.length;i++) {
      var link = links.item(i);
      link.onclick = function() {
          return confirm('You are going to visit: ' + this.href);
      };
  }

  $('#external_links a').click(function() {
      return confirm('You are going to visit: ' + this.href);
  });

• Plugin architecture

• Why don't use the same language as client?
• The joys of async programming

  var http = require('http');
  var server = http.createServer(function (req, res) {
      res.writeHead(200, { "Content-Type": "text/plain" })
      res.end("Hello world");
  }).listen(80);

• Front-end developers can develop network service easily
• no.de
  • Node.js Cloud Services
  • Virtualization + Server-side JavaScript

• Modulization
  • CommonJS and AMD
• MVC Pattern
  • SproutCore: Apple iCloud
• Design Patterns
• Feature Detection
  • Modernizr

    <script src="js/modernizr-1.0.min.js"></script>
    <html class="no-js">
                

    <html class="js canvas geolocation no-multiplebgs">
                

• Testing
  • Unit Testing
  • GUI Testing: Sencha EventRecorder
• Build Process
  • build script
  • Optimization, Minifcation/Concatenation
  • Grunt: a task-based command line build tool for JavaScript projects
• UI Widgets
  • Dojo Toolkit, Sencha, Kendo UI

• Already, we use web so much in software development
  • using a web-based bug tracking system
  • monitoring your build
  • reviewing code changes
  • reading documentation and searching for code snippets
  • browsing other people's code repositories
• Web browser is the best simulator for web technology

• Node.js
  • Express (node web framework)
  • oAuth (Sign in with twitter)
• UI
  • Template Engine: EJS than Jade
  • Twitter bootstrap
• DB
  • MongoDB
• Hosting in no.de Smart Machine

• Route and RESTful

  app.get('/documents', loadUser, documents.index);
  app.post('/documents.:format?', loadUser, documents.create);
  
  app.del('/sessions', function(req, res) ...); // ?
          

• Access control middleware

  function loadUser(req, res, next) {
      if (req.session.user_id) {
          next();
      } else {
          res.redirect('/sessions/new');
      }
  }
          

• HTML5, CSS3, JavaScript
• Hybrid App

• Mobile Web

• Web-based IDE
• Cloud
• Development Tools

• The risk of exposing core logic
• The risk of losing local data
• Low performance: 페이스북 아이폰 앱에서 HTML5 포기
• The Web is Dead | 폐쇄된 플랫폼의 관성과 대안 OS

• Compile C/C++ to Javascript
• asm.js

• HTML5 Showcase for Web Developers: The Wow and the How
• CSS3
  • CSS3 소개
• HTML5
  • History and Status of HTML5
  • No Tears Guide to HTML5 Games
• JavaScript
  • Tools For jQuery Application Architecture
• BUILD
• 크로스플랫폼 앱 프레임워크 선택의 기준