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

Pragmatic Web Components

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Nicolas Mérouze Nicolas Mérouze
February 04, 2014
Programming
93
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
82
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
AIキャラアプリkaiwaの低遅延音声通話基盤をどう作ったか - AWS Gravitonで支える低遅延・低コストAI Agent基盤
Avatar for 最上土川 mogamit
0
180
改善しないと、タスクが回らない。 “てんこ盛りポジション” を引き継いだ情シスの、入社3ヶ月の業務改善録
Avatar for Kurumi Watabe krm963
0
110
FDEが実現するAI駆動経営の現在地
Avatar for ryuta sakamoto gonta
2
200
変わらないものが、変わるものを決める — 意図駆動開発 × イベントソーシング × イミュータブル | What Doesn't Change Decides What Can — IDD × Event Sourcing × Immutability
Avatar for Tomohisa Takaoka tomohisa
0
160
act1-costs.pdf
Avatar for Sumedh Bala sumedhbala
0
240
えっ!!コードを読まずに開発を!?
Avatar for はなのうち hananouchi
0
230
ソフトウェア設計に溶けるインフラ ― AWS CDK のインフラ認識論
Avatar for Kenji Kono konokenj
2
620
エンジニア向け会社紹介/Findy Company Profile
Avatar for Findy findyinc
6
360k
AI時代のPHPer生存戦略 ～「言語、もうなんでもよくない？」に本気で向き合う～
Avatar for viviON vivion
0
150
AI時代、エンジニアはどう育つのか -未経験エンジニアの成長を間近で見て考えたこと-
Avatar for ta-hasunuma thasu0123
0
140
SREの積み重ねがAI駆動開発のガードレールになった ― 7つの実践/SRE Guardrails The 7
Avatar for TomoyaKitaura tomoyakitaura
8
5.3k
任せる範囲はこう広がった / How the Scope of AI Delegation Has Expanded
Avatar for nrs nrslib
1
270

Featured

See All Featured
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
150
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.3k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
27k
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
310
A Soul's Torment
Avatar for Nat Ma seathinner
6
3.1k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
750
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.3k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
210

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