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

Pragmatic Web Components

Avatar for Nicolas Mérouze Nicolas Mérouze
February 04, 2014
Programming
96
1

Pragmatic Web Components

Pragmatic RESTful APIs mixed with Web Components for a flexible frontend development.

Avatar for Nicolas Mérouze

Nicolas Mérouze

February 04, 2014

More Decks by Nicolas Mérouze

See All by Nicolas Mérouze
Table-Driven Testing
Avatar for Nicolas Mérouze nmerouze
0
83
Make Hypermedia APIs in Ruby
Avatar for Nicolas Mérouze nmerouze
4
450
Netty with JRuby (French)
Avatar for Nicolas Mérouze nmerouze
2
250

Other Decks in Programming

See All in Programming
ドリフトを絶対に許さない（？）CDK運用 / CDK Ops with Zero Tolerance for Drifts (?)
Avatar for アキキー | Akihisa Ikeda akihisaikeda
1
200
生成AIで帳票OCRが「簡単に」作れる時代になった？
Avatar for Shohei Kondo kon_shou
0
1.1k
自動化したのに回らない テスト運用の壁 ―AI時代の品質責任と生産性
Avatar for Masahiko Funaki(舟木 将彦) mfunaki
0
280
TSX の <Hoge<Fuga>> という構文に驚いた話 / tsx-type-argument-syntax
Avatar for Kanaru kanaru0928
0
230
VibeCodingからAgenticWorkflowへ
Avatar for starfish719 starfish719
0
620
S3 を使うアプリケーションをローカル完結で動かすことに全力を注いでみた / Running S3 Apps Offline
Avatar for Daisuke Garaike contour_gara
0
520
改善しないと、タスクが回らない。 “てんこ盛りポジション” を引き継いだ情シスの、入社3ヶ月の業務改善録
Avatar for Kurumi Watabe krm963
0
270
170k Jobs a Day on GKE: Scaling Mercari's CI Platform - and What's Next for AI-Native Development
Avatar for Junya Okabe junyaokabe
0
110
KotlinConf Extended South Korea 2026 Keynote
Avatar for HyunWoo Lee l2hyunwoo
0
110
SlackアプリとLambdaの 連携を構築した話
Avatar for pawn pawn_4_s
1
120
Jindong: Introducing Declarative Haptics in Compose Multiplatform
Avatar for HyunWoo Lee l2hyunwoo
0
120
AWS CDK を「作」ってみた 〜フルスクラッチで見えた CDK の裏側〜 / aws-cdk-from-scratch
Avatar for k.goto gotok365
3
2.8k

Featured

See All Featured
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.3k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
390
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.8k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.5k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
210
Designing for Performance
Avatar for Lara Hogan lara
611
70k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.9k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
290
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
68
56k
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
1
460

Transcript

  1. Pragmatic Web Components

  2. Web Component ?

  3. Make your own HTML elements

  4. Reuse code

  5. Pragmatic ?

  6. Hypermedia/Pragmatic APIs

  7. Let the API do the work

  8. Example: Pagination

  9. Rails Way

  10. gem 'kaminari'

  11. class PostsController < ApplicationController def index @posts = Post.page(params[:page]) end

    end

  12. <%= @posts.total_count %> résultats <%= paginate @posts %>

  13. 30 résultats < Prev Next >

  14. API + React.js

  15. gem 'active_model_serializers'

  16. class PostSerializer < ActiveModel::Serializer attributes :id, :title, :body end

  17. { "posts": [{ "id": "1", "title": "foobar", "body": "such foobar"

    }] }

  18. class PostsController < ApplicationController def index page = (params[:page] ||

    1).to_i @posts = Post.page(page) pagination = { totalCount: @posts.total_count } pagination[:next] = posts_url(page: page + 1) unless page == @posts.total_pages pagination[:prev] = posts_url(page: page - 1) unless page == 1 render json: @posts, meta: { pagination: pagination } end end

  19. { "meta": { "pagination": { "totalCount": 30, "next": "http://localhost:3000/posts?page=3", "prev":

    "http://localhost:3000/posts?page=1" } } "posts": [{ "id": "1", "title": "foobar", "body": "such foobar" }] }

  20. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Pragmatic Web Components</title>

    </head> <body> <div id="pagination"></div> </body> </html>

  21. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Pragmatic Web Components</title>

    <script src="//fb.me/JSXTransformer-0.8.0.js"></script> <script src="//fb.me/react-0.8.0.js"></script> </head> <body> <div id="pagination"></div> <script type="text/jsx"> /** @jsx React.DOM */ React.renderComponent(<Paginaton/>, document.getElementById('pagination')); </script> </body> </html>

  22. <script type="text/jsx"> /** @jsx React.DOM */ var Paginaton = React.createClass({

    render: function() { return ( <div> <div>{this.state.totalCount} résultats</div> <div> <a href={this.state.prev} onClick={this.prevPage}>‹ Prev</a> <a href={this.state.next} onClick={this.nextPage}>Next ›</a> </div> </div> ); } }); </script>

  23. <script type="text/jsx"> /** @jsx React.DOM */ var Paginaton = React.createClass({

    getInitialState: function() { return { totalCount: 0, next: null, prev: null }; }, // render }); </script>

  24. <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></ script> <script type="text/jsx"> /** @jsx React.DOM */ var

    Paginaton = React.createClass({ componentDidMount: function() { this.fetchPosts("/posts"); }, fetchPosts: function(url) { var self = this; $.getJSON(url, function(data) { var pagination = data.meta.pagination; self.setState({ totalCount: pagination.totalCount, next: pagination.next, prev: pagination.prev }); }); }, prevPage: function(e) { this.fetchPosts(this.state.prev); return false; }, nextPage: function(e) { this.fetchPosts(this.state.next); return false; }, // getInitialState, render }); </script>

  25. 30 résultats < Prev Next >

  26. More features: link component, display posts

  27. Apply everywhere

  28. Forms (Validations, Errors, Search)

  29. Breadcrumbs, Flashes, Tabs, Tables

  30. Web Components standard http://w3.org/TR/components-intro

  31. React.js http://facebook.github.io/react

  32. x-tags http://x-tags.org

  33. polymer http://polymer-project.org

  34. Ember.js http://ember.js

  35. What we saw today?

  36. Web Components are simple and usable today

  37. More information in your API == less code for the

    frontend

  38. Rails is great for APIs with ActiveModel::Serializers

  39. Nicolas Mérouze http://merouze.me

  40. In-App Cloud http://inappcloud.com