Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Web Of The Future - Knockout Components

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Jaime Jaime
September 12, 2014
Programming
1.3k
1

The Web Of The Future - Knockout Components

A very simple introduction to Knockout Components

Avatar for Jaime

Jaime

September 12, 2014

More Decks by Jaime

See All by Jaime
Mastering the Arcane Art of JavaScriptmancy @ DevSum
Avatar for Jaime vintharas
1
960
From Angular 1 to Angular 2
Avatar for Jaime vintharas
0
2.2k
Mastering The Arcane Art of JavaScriptmancy - Swetugg Edition
Avatar for Jaime vintharas
1
1.6k
Mastering the Arcane Art of JavaScript-mancy
Avatar for Jaime vintharas
0
3.9k
Level-Up Your Code-Fu With Chuck Norris (and ReSharper, VsVim and NCrunch)
Avatar for Jaime vintharas
0
1.4k
Introduction to RavenDB
Avatar for Jaime vintharas
0
1.4k
The Path to Jedi Text Editing With VIM - Padawan Edition
Avatar for Jaime vintharas
0
1.9k
TypeScript
Avatar for Jaime vintharas
3
410
The Way of the ReSharper Samurai
Avatar for Jaime vintharas
0
600

Other Decks in Programming

See All in Programming
Hunting Vulnerabilities in Symfony with LLMs
Avatar for Vincent Amstoutz vinceamstoutz
0
300
Make SRE Operations Easier with Azure SRE Agent
Avatar for KAMEGAWA Kazushi kkamegawa
0
4.4k
TSKaigi Night Talks 2026_TypeScriptでサプライチェーンの整合性を型に閉じ込める
Avatar for ギークプラス ソフトウェア事業部 geekplus_tech
0
320
Lessons from Spec-Driven Development
Avatar for Simon Martinelli simas
PRO
0
140
AI駆動開発で崩れていくコードベースを立て直す
Avatar for Kyoko NR kyoko_nr_nr
1
440
柔軟なPDFレイアウトエディタを支える型システム設計 — Discriminated UnionとConditional Typeの実践
Avatar for minako-ph minako__ph
4
1.4k
3Dシーンの圧縮
Avatar for Fadis fadis
1
670
AI駆動開発勉強会 広島支部 第一回勉強会 AI駆動開発概要とワークショップ
Avatar for smz hyt hayatoshimiu
0
450
Dataformのリポジトリを立ち上げるときにまずやること / dataform-day0-2026
Avatar for snhryt snhryt
0
120
AI 時代のソフトウェア設計の学び方
Avatar for 増田 亨 masuda220
PRO
29
12k
New "Type" system on PicoRuby
Avatar for pocke pocke
1
530
CSC307 Lecture 17
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
320

Featured

See All Featured
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.2k
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
430
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.1k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
220
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
2
570
How to make the Groovebox
Avatar for あそなす asonas
2
2.2k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
720
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
201
75k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
10k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5.1k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.2k

Transcript

  1. None
  2. None
  3. None
  4. None
  5. None
  6. None

  7.  KO Components  DEMO  KO COMPONENTS IN MEDIUSFLOW

    XI  WANT TO KNOW MORE?

  8. The Web of The Future  KNOCKOUT 3.2.  SEMANTIC

    AND DOMAIN - SPECIFIC HTML  REUSABLE COMPONENTS  NEW UNIT OF COMPOSITION OF AN APP

  9. The Web of The Future <html> <head><title>Mediusflow XI</title></head> <body> <app-header></app-header>

    <inbox params=‘tasks’></inbox> <task params=‘selectedTask’></task> </body> </html> <folders></folders> <inbox-filter></inbox-filter> <grid params=“gridConfig”></grid> html template view model define(function(){ function ViewModel(params){ // stuff }; return ViewModel; });

  10. The Web of The Future  improve front-end architecture 

    IMPROVE COMPOSABILIty AND CODE REUSE  improve readability  IMPROVE PERFORMANCE: AMD, DISPOSAL
  11. None

  12. https://github.com/Vintharas/BackToTheFutureOfTheWeb

  13. The Web of The Future

  14. The Web of The Future 1. UPDATE KNOCKOUT.JS to 3.2

    VERSION 2. ROCK ON!
  15. None

  16. The Web of The Future https://vimeo.com/97519516 https://vimeo.com/97519516

  17. The Web of The Future  KNOCKOUT DOCUMENTATION http://knockoutjs.com/documentation/component-overview.html 

    KNOCKMEOUT.NET on components http://www.knockmeout.net/2014/06/knockout-3-2-preview-components.html  WEB COMPOnents W3C STANDARD http://www.w3.org/TR/components-intro/  POLYMER https://www.polymer-project.org/  ANGULAR.JS CUSTOM DIRECTIVES https://docs.angularjs.org/guide/directive

  18. The Web of The Future ENJOY THOSE WEB COMPONENTS!