1. Web API JavaScript SQL-like database 2015/6/13 htmlday 2015HTML5 Toru Yoshikawa (@yoshikawa_t) 2. Who? html5j Google Developer Experts (Chrome) HTML5 Experts.jp html5j Web ()jQuery Mobile ()Sublime Text 2 Japan Users Group () Blog: http://d.hatena.ne.jp/pikotea/ / Toru Yoshikawa @yoshikawa_t 3. Web 4. Web Application Cache SQL Database localStorage 5. Web Oine Web ApplicationHTML5 Application Cache Service Worker Web 6. Web HTML5 AppCache SW 7. Web 8. 9. 10. Indexed Database KVS Web Web Application Cache indexedDB 11. Indexed Database localStorage API JS Blob WorkerServiceWorker API 12. Indexed Database RDBMSSQL NG 13. 14. SQL 15. Loveeld https://github.com/google/loveeld 16. SQL DDL CREATE TABLE Item ( id AS INTEGER, description AS INTEGER, deadline as DATE_TIME, done as BOOLEAN, PRIMARY KEY ON ('id') ); CREATE INDEX idxDeadLine ON Item.deadline DESC; schemaBuilder.createTable('Item'). addColumn('id', lf.Type.INTEGER). addColumn('description', lf.Type.STRING). addColumn('deadline', lf.Type.DATE_TIME). addColumn('done', lf.Type.BOOLEAN). addPrimaryKey(['id']). addIndex('idxDeadline', ['deadline'], false, lf.Order.DESC); 17. SQL DML //INSERT OR REPLACE INSERT OR REPLACE INTO Item VALUES row; ! //SELECT SELECT * FROM Item WHERE Item.done = false; ! //DELETE DELETE FROM infoCard WHERE lang = 'es'; //INSERT OR REPLACE db.insertOrReplace().into(item).values([row]). exec(); ! ! //SELECT db.select().from(item).where(item.done.eq(fals e)).exec(); ! //DELETE db.delete().from(infoCard).where(infoCard.lang .eq('es')).exec(); 18. Loveeld INNER JOIN innerJoin() LEFT OUTRER JOIN leftOuterJoin() GROUP BY groupBy() = eq neq < lt gt >= gte SIMILAR match(regex) BETWEEN between IN in IS NULL isNull IS NOT NULL isNotNull AND lf.op.and OR lf.op.or NOT lf.op.not LIMIT limit() SKIP skip() ORDER BY orderBy() AVG lf.fn.avg COUNT lf.fn.count DISTINCT lf.fn.distinct MAX lf.fn.max MIN lf.fn.min STDDEV lf.fn.stddev SUM lf.fn.sum FOREIGN KEY addForeignKey() 19. SQL 20. I/O Codelabs Bulding data-rich web apps with Loveeld https://io2015codelabs.appspot.com/codelabs/all 21. Service Worker + Indexed Database(loveeld) = Oine Web Application 22. BaaS ex)Firebase Web SW + DB SW DB REST APIJSON Background Sync RW 23. BaaS ex)Firebase Web SW + DB SW DB RW DB 24. Web SW BaaS ex) Firebase SW + DB SW or DB DB REST APIJSON 25. Web 26. Thank you!! ( @yoshikawa_t )