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
1
83

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
Tweet

More Decks by Nicolas Mérouze

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

Other Decks in Programming

See All in Programming
Deep Dive into Kotlin Flow
Avatar for Matsuda Jumpei jmatsu
1
350
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
Avatar for Tomoya Miwa tomoya0x00
0
1.5k
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
Avatar for Marco Roth marcoroth
0
690
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
Avatar for azukiazusa azukiazusa1
24
12k
個人軟體時代
Avatar for Ethan Huang ethanhuang13
0
320
はじめてのMaterial3 Expressive
Avatar for yume ym223
2
740
ファインディ株式会社におけるMCP活用とサービス開発
Avatar for starfish719 starfish719
0
1.6k
Reading Rails 1.0 Source Code
Avatar for Masafumi Okura okuramasafumi
0
240
アルテニア コンサル／ＩＴエンジニア向け 採用ピッチ資料
Avatar for ALTENIR altenir
0
110
Tool Catalog Agent for Bedrock AgentCore Gateway
Avatar for matsukada licux
6
2.5k
Navigation 2 を 3 に移行する（予定）ためにやったこと
Avatar for yokomii yokomii
0
270
AWS発のAIエディタKiroを使ってみた
Avatar for 入井 啓太 iriikeita
1
190

Featured

See All Featured
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
207
24k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.4k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
460k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.2k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
820
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
Side Projects
Avatar for Sacha Greif sachag
455
43k

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