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

The Web Of The Future - Knockout Components

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
940
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
400
The Way of the ReSharper Samurai
Avatar for Jaime vintharas
0
580

Other Decks in Programming

See All in Programming
開発体験を左右するライブラリの API 設計 - GraphQL スキーマ構築ライブラリから考える #tskaigi
Avatar for izumin5210 izumin5210
1
190
AIを導入する前にやるべきこと
Avatar for Negima negima
2
360
WebAssembly を読み込むベストプラクティス 2026年春版 / Best Practices for Loading WebAssembly (Spring 2026)
Avatar for petamoriken / 森建 petamoriken
5
1.1k
Migrations : C'est une question d'hygiène !
Avatar for Vincent Amstoutz vinceamstoutz
0
670
柔軟なPDFレイアウトエディタを支える型システム設計 — Discriminated UnionとConditional Typeの実践
Avatar for minako-ph minako__ph
1
170
リセットCSSを1行消したらアクセシビリティが向上した話
Avatar for pvcresin pvcresin
4
520
書き換えて学ぶTemporal #fukts
Avatar for Hiroyuki ANAI pirosikick
2
380
UaaL×Androidアプリのメモリ計測 — Memory Profilerの先へ
Avatar for Ryosuke Shimizu (RIO) rio432
0
160
When benchmarks go bad - what I learned from measuring performance wrong
Avatar for Holly Cummins hollycummins
0
390
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
530
【ディップ｜26年新卒研修資料】TDD実装演習
Avatar for ディップ株式会社 dip_tech
PRO
0
190
ビジネスモデルから紐解く、AI+型駆動開発
Avatar for Hiroki Omote hirokiomote
0
260

Featured

See All Featured
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
510
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
23k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
10
37k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
52k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.2k
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.2k
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
550
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
9.9k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Visualization
Avatar for Eitan Lees eitanlees
151
17k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
Designing for Performance
Avatar for Lara Hogan lara
611
70k

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!