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
AIチームを指揮するOSS「TAKT」活用術 / How to Use “TAKT,” an OSS Tool for Orchestrating AI Teams
Avatar for nrs nrslib
6
830
Why Laravel apps break—Mastering the fundamentals to keep them maintainable
Avatar for 武田 憲太郎 kentaroutakeda
1
340
作って学ぶ、 JSX (TSX) ランタイムの基本
Avatar for syumai syumai
7
1.5k
Spring Security 実践 ─ GraphQL APIで実務に役立つ 認証・認可 を学ぶ
Avatar for Wagyu wagyu
0
150
dRuby over BLE
Avatar for makicamel makicamel
2
320
TypeSpec で繋ぐ複数プロダクトの型安全
Avatar for Mitsui maroon8021
1
380
CLIであることを活かしたGitHub Copilot CLI活用術 / GitHub Copilot CLI Pro Tips & Tricks
Avatar for Naoya.i nao_mk2
1
1.2k
PHPで使える日時の表現と、その知り方 #frontend_phpcon_do
Avatar for hideki kinjyo o0h
PRO
0
190
開発体験を左右するライブラリの API 設計 - GraphQL スキーマ構築ライブラリから考える #tskaigi
Avatar for izumin5210 izumin5210
2
1.6k
軽量Java基盤の設計 DIコンテナに頼らない、長期保守と1秒起動の実現 JJUG CCC 2026 Spring
Avatar for Masaaki Takahashi macha64
0
460
TSKaigi Night Talks 2026_TypeScriptでサプライチェーンの整合性を型に閉じ込める
Avatar for ギークプラス ソフトウェア事業部 geekplus_tech
0
300
柔軟なPDFレイアウトエディタを支える型システム設計 — Discriminated UnionとConditional Typeの実践
Avatar for minako-ph minako__ph
4
1.4k

Featured

See All Featured
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
2
1.1k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.1k
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.8k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
240
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
150
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
200
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.2k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
1.1k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
1
150
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.3k

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!