Slides from my talk on #ruby-mg meeting. Intro about how we in catars.me are using postgREST to create fast and simple API that can be represented with various mithril.js components.

1. mithril.js + postgREST
to build and consume awesome API’s

2. Antônio Roberto - ton
twitter.com/_devton
github.com/devton
me

3. catarse.me
work

4. github.com/catarse
open

5. +
+
backend stuff
stack

6. why we need
• real split front-end / backend
• expands to other devices
• composable middleware
api?

7. research

8. +
+ +
backend stuff
stack

9. github.com/begriffs/postgrest

10. PostgREST serves a fully RESTful API from any
existing PostgreSQL database. It provides a
cleaner, more standards-compliant, faster API
than you are likely to write from scratch.
begriffs
github.com/begriffs/postgrest

12. • Versioning
• Authorization
• Serializing JSON responses directly in SQL

13. Versioning
https://github.com/begriffs/postgrest/wiki/API-Versioning

14. Versioning
DATABASE SCHEMA
CREATE SCHEMA “2";
GRANT USAGE ON SCHEMA "2" TO PUBLIC;
ALTER DATABASE your_db
SET search_path = "2", "1";

15. Accept: application/vnd.you.com+json; version=1
Versioning
HTTP REQUEST HEADER

16. Authorization
https://github.com/begriffs/postgrest/wiki/Security-and-Permissions

17. Auth
SCHEMA
CREATE SCHEMA postgrest;
SET search_path = postgrest, pg_catalog, “1”;

18. Auth
TABLE
CREATE TABLE postgrest.auth (
id character varying NOT NULL,
rolname name NOT NULL,
pass character(60) NOT NULL,
CONSTRAINT auth_pkey PRIMARY KEY (id)
) WITH ( OIDS=FALSE );

19. Auth
HTTP REQUEST
POST /postgrest/users
{
"id": "jdoe",
"pass": "supersecret",
"role": "author"
}

20. PostgREST exposes the current
user id as user_vars.user_id,
which is a variable we can use
inside triggers and functions.
SELECT current_setting('user_vars.user_id');
begriffs
github.com/begriffs/postgrest

21. Auth
JSON Web Tokens
POST /postgrest/token
{
"id": "jdoe",
"pass": "supersecret"
}

22. Auth
JSON Web Tokens
GET /need-auth
Authorization: Bearer [token]

23. Serializing JSON

24. Serializing JSON
HTTP REQUEST
GET /team_totals

25. Serializing JSON
VIEW “1”.team_totals
CREATE OR REPLACE VIEW "1".team_totals as (
select
count(DISTINCT u.id) as member_count,
array_to_json(array_agg(DISTINCT country.name)) as countries,
count(DISTINCT c.project_id)
FILTER (WHERE c.was_confirmed)
as total_contributed_projects,
count(DISTINCT lower(unaccent(u.address_city))) as total_cities,
sum(c.value)
FILTER (WHERE c.was_confirmed)
as total_amount
from users u
left join contributions c on c.user_id = u.id
left join countries country on country.id = u.country_id
where u.admin
);

26. Serializing JSON
GET /team_totals
[
{
"member_count": 26,
"countries": [
"Austrália",
"Brasil",
"Canadá",
"Dinamarca"
],
"total_contributed_projects": 617,
"total_cities": 12,
"total_amount": 66649.09
}
]

28. http://mithril.js.org

29. Mithril is a client-side MVC framework - a tool
to organize code in a way that is easy to think
about and to maintain.

30. • Only 12kb gzipped, no dependencies
• Virtual DOM diffing and compilable templates
• Intelligent auto-redrawing system
• Hierarchical MVC via components
• Small API, small learning curve

31. Loading - Rendering
http://mithril.js.org/benchmarks.html

32. window.c.TeamTotal = ((m, models, _) => {
return {
controller: () => {
// ...
},
view: (ctrl) => {
// ...
}
};
}(window.m, window.c.models, window._));
our component struct

33. controller
controller: () => {
let teamTotal = m.prop([]);
models.teamTotal.getRow().then(teamTotal);
return {
teamTotals: teamTotals
};
},

34. view
view: function(ctrl) {
return m('#team-total', [
_.map(ctrl.teamTotals(), (teamTotal) => {
return m('.w-container', [
m('.w-row', [
m('p.fontsize-base', [
'Hoje somos ', teamTotal.member_count,
' pessoas espalhadas por ', teamTotal.total_cities,
' cidades em ', teamTotal.countries.length
])
])
]);
})
]);
}

37. mithril.postgrest
github.com/catarse/mithril.postgrest

38. mithril.postgrest
• Help you authenticating in a PostgREST server.
• Provide wrappers arround the mithril request
function to use JWT.
• Provide a constructor for objects that will
interact with PostgREST endpoints
• Provide some helpers to build some useful View-
Model objects.

39. mithril.postgrest
• Help you authenticating in a PostgREST server.
• Provide wrappers arround the mithril request
function to use JWT.
• Provide a constructor for objects that will
interact with PostgREST endpoints
• Provide some helpers to build some useful View-
Model objects.

40. Model
mithril.postgrest
let teamTotal = m.postgrest.model(‘team_totals’);
teamTotal.getRow().then((row) => {
console.log('fecthed:', row);
});

41. filter view models
mithril.postgrest
let filters = m.postgrest.filtersVM({id: ‘eq’}),
users = m.postgrest.model(‘users');
filters.id(7);
users.getPage(filters.parameters()).then((data) => {
console.log('fetched:', data);
})

42. pagination view model
mithril.postgrest
var userPages = m.postgrest.paginationVM(users.getPageWithToken);
// The firstPage function returns a mithril promise
userPages.firstPage(filters.parameters()).then(() => {
// Results are in collection
console.log(userPages.collection());
},
() => {
alert('Error loading users');
});
* paginationVM(loadPageFunction) - Generate a pagination View-Model that loads pages using
the loadPageFunction (should be a mithril request)

43. pagination view model
mithril.postgrest
// The nextPage function returns a mithril promise
userPages.nextPage().then(() => {
// Results are appended to collection
console.log(userPages.collection());
},
() => {
alert('Error loading next page');
});

44. https://github.com/catarse/catarse.js
https://github.com/catarse/catarse
http://silvers.org/pg <- recommended!!
https://github.com/catarse/mithril.postgrest
links

45. keep going ->
thanks

46. more
cool
stuff
AHEAD

47. scenario
project reminder feature

48. step 1 - routes
project reminder routes

49. step 1 - routes
project reminder routes

50. step 2 - view
project reminder view

51. step 2 - view
project reminder view
postgREST default schema = “1”
check if transaction user is a owner or admin

52. step 2 - view
project reminder grants
since we are using postgres user role system we need to grant privileges to
roles that you want to given access.

53. step 2 - view
project reminder functions / triggers
since postgREST implements authentication endpoints and JWT tokens, we need
to prevent that admin or web_user delete all your reminders and create
reminders for other users.

54. public.insert_project_reminder() trigger

55. public.delete_project_reminder() trigger

56. current_setting(‘user_vards.user_id’)
the setting ‘user_vards.user_id’
is set via postgREST has local on transaction

57. testing requests [POST]

58. testing requests [GET]

59. testing requests [DELETE]

60. last - component
project reminder javascript component
github.com/catarse/catarse.js
this repo handles with all mithril components

61. c.ProjectReminder
this component should handle with:
- reminder btn render
- insert reminder
- delete reminder

62. c.ProjectReminder.controller

63. c.ProjectReminder.controller

64. c.ProjectReminder.view

66. mounting Component
mounting project-reminder

67. http://d.pr/i/15ktg