![product_query = sa.FieldsQuery('db.session', Product.__table__)
low_level_graph = Graph([
Node('Product', [
Field('id', Integer, product_query),
Field('name', String, product_query),
Field('price', None, product_query),
])
13](https://image.slidesharecdn.com/pyconukraine2018-180430114705/85/How-to-separate-frontend-from-a-highload-python-project-with-no-problems-Pycon-UA-2018-13-320.jpg)
!["""
SELECT id, name, price FROM product
WHERE id IN (:id1, :id2, ..., :idN)
"""
product(ids: [1234, 1235]) {
id
name
price
}
14](https://image.slidesharecdn.com/pyconukraine2018-180430114705/85/How-to-separate-frontend-from-a-highload-python-project-with-no-problems-Pycon-UA-2018-14-320.jpg)
![low_level_graph = Graph([
Node('Product', [
Field('id', Integer, product_query),
...
Link(
'discount',
Optional[TypeRef['Discount']],
product_to_discount_query,
requires='id',
),
]),
Node('Discount', [
Field('id', Integer, discount_query),
Field('amount', Integer, discount_query),
])
])
15](https://image.slidesharecdn.com/pyconukraine2018-180430114705/85/How-to-separate-frontend-from-a-highload-python-project-with-no-problems-Pycon-UA-2018-15-320.jpg)
![17
product_sg = SubGraph(low_level_graph, 'Product')
high_level_graph = Graph([
Node('Product', [
Field('id', String, product_sg),
Field('name', String, product_sg.compile(S.this.name)),
Field('priceText', String, product_sg.compile(
get_price_text(S.this)
)),
Field('hasDiscount', Boolean, product_sg.compile(
is_discount_available(S.this, S.this.discount)
)),
Field('discountedPriceText', String, product_sg.compile(
get_discounted_price_text(S.this, S.this.discount)
)),
]),
])](https://image.slidesharecdn.com/pyconukraine2018-180430114705/85/How-to-separate-frontend-from-a-highload-python-project-with-no-problems-Pycon-UA-2018-17-320.jpg)
![18
@define(Record[{
'price': Float,
'price_currency_id': Integer,
'currency_settings': Any
}])
def get_price_text(product):
product_price_text = format_currency_data(
product_price,
product['price_currency_id'],
)
return product_price_text.formatted_number](https://image.slidesharecdn.com/pyconukraine2018-180430114705/85/How-to-separate-frontend-from-a-highload-python-project-with-no-problems-Pycon-UA-2018-18-320.jpg)
More Related Content
What's hot (13)
Similar to How to separate frontend from a highload python project with no problems - Pycon UA 2018 (20)
Recently uploaded (20)
How to separate frontend from a highload python project with no problems - Pycon UA 2018
- 1. How to separate frontend from a highload python project with no problems Oleksandr Tarasenko EVO.company / prom.ua
- 2. Some prom.ua numbers ¡ñ RPS 2000-3000 ¡ñ users over 2.5 million per day ¡ñ paid sites ~ 50 000 ¡ñ total sites over 300 000 ¡ñ products ~ 100 million ¡ñ pages ~ 300 million 2
- 3. What we had ¡ñ monolithic WSGI app (10 years) ¡ñ mako templates ¡ñ monolithic database ¡ñ monolithic Nginx ¡ñ poor REST API ¡ñ slow Delivery and Deployment ¡ñ new features were hard to develop 3
- 4. 4 1. Resolve url 2. Collect base context 3. Call render_mako 4. Collect template context 5. Return html
- 5. Our goals ¡ñ SEO ¡ñ Independent frontend ¡ñ Good user experience ¡ñ Documentation ¡ñ Data validation ¡ñ Microservices way ¡ñ Independent CI/CD 5
- 6. Tools and expertise ¡ñ ReactJS / Redux ¡ñ GraphQL server (hiku) ¡ñ Container system (vagga/lithos) ¡ñ Metrics (grafana) ¡ñ Logs (kibana) 6
- 7. GraphQL + React + Apollo + Node.js = success story 7
- 8. 8 GraphQL
- 10. Why we choose GraphQL ¡ñ good for readonly requests and data ¡ñ mutations to REST ¡ñ every site has unique user settings ¡ñ different templates 10
- 11. Some prom.ua sites code facts ¡ñ a lot of views and url endpoints ¡ñ almost no documentation ¡ñ poor versioning ¡ñ a lot of template context ¡ñ duplicating queries 11
- 12. We built two-level graph ¡ñ low-level graph for database mapping (data loading) ¡ñ high-level graph for business logic ¡ñ auto documentation with graphiql tool ¡ñ data validation 12
- 13. product_query = sa.FieldsQuery('db.session', Product.__table__) low_level_graph = Graph([ Node('Product', [ Field('id', Integer, product_query), Field('name', String, product_query), Field('price', None, product_query), ]) 13
- 14. """ SELECT id, name, price FROM product WHERE id IN (:id1, :id2, ..., :idN) """ product(ids: [1234, 1235]) { id name price } 14
- 15. low_level_graph = Graph([ Node('Product', [ Field('id', Integer, product_query), ... Link( 'discount', Optional[TypeRef['Discount']], product_to_discount_query, requires='id', ), ]), Node('Discount', [ Field('id', Integer, discount_query), Field('amount', Integer, discount_query), ]) ]) 15
- 16. 16 discount_query = sa.FieldsQuery('db.session', Discount.__table__) """ SELECT id, name, price, price_currency_id FROM product WHERE id IN (:id1, :id2, ..., :idN) """ product_to_discount_query = sa.LinkQuery( 'db.session', from_column=Discount.product_id, to_column=Discount.product_id, ) """ SELECT product_id FROM discount WHERE product_id IN (:id1, :id2, ..., :idN) """
- 17. 17 product_sg = SubGraph(low_level_graph, 'Product') high_level_graph = Graph([ Node('Product', [ Field('id', String, product_sg), Field('name', String, product_sg.compile(S.this.name)), Field('priceText', String, product_sg.compile( get_price_text(S.this) )), Field('hasDiscount', Boolean, product_sg.compile( is_discount_available(S.this, S.this.discount) )), Field('discountedPriceText', String, product_sg.compile( get_discounted_price_text(S.this, S.this.discount) )), ]), ])
- 18. 18 @define(Record[{ 'price': Float, 'price_currency_id': Integer, 'currency_settings': Any }]) def get_price_text(product): product_price_text = format_currency_data( product_price, product['price_currency_id'], ) return product_price_text.formatted_number
- 19. Some facts of the new graph ¡ñ number of fields: ~ 500 ¡ñ number of links: ~ 125 ¡ñ number of nodes: ~ 75 ¡ñ single entry point /graphql ¡ñ refactoring and new vision for code ¡ñ better monitoring ¡ñ easy to test API with graphiql 19 Hiku
- 20. 20 Frontend
- 21. Stateless ReactJS ¡ñ React Apollo ¡ñ React Router ¡ñ React Helmet ¡ñ No Redux/Flux/State management lib 21
- 22. Apollo client benefits ¡ñ great GraphQL implementation ¡ñ no sugar in React components ¡ñ query batching ¡ñ state cache ¡ñ community ¡ñ combine | join graphs (Apollo server) 22
- 23. 23 export const Article = ({ data }) => { if (data.loading) return <Spinner />; if (!data.article.id) return <NotFound />; return ( <BasePage> <ArticleViewMeta id={data.article.id} /> <BaseViewComponent {...data.article} /> <Footer /> </BasePage> ); };
- 24. 24 const articleViewQuery = gql` query getArticleViewData($id: String) { article(id: $id){ id title text } }`; export const ArticleWithData = graphql(articleViewQuery, { options: ({ id }) => { return { variables: { id } }; }, })(Article);
- 25. Other javascript implementations ¡ñ Relay modern / Relay classic ¡ñ Apollo client / Apollo server / Apollo engine ¡ñ Lokka ¡ñ Prisma ¡ñ GraphQL.js ¡ñ express-graphql 25
- 26. 26 Node.js
- 27. Node.js implementation ¡ñ Only for the first request (SSR) ¡ñ Good for React prerender ¡ñ Routing ¡ñ Two-step implementation 27
- 28. 28
- 29. 29
- 30. 30
- 31. 31 Nginx
- 32. 32
- 33. 33
- 34. Success product metrics 34 from 4.8 to 7.1
- 35. Success product metrics 35 from 57.5% to 49%
- 36. Some numbers of the new scheme ¡ñ node.js workers 8 ¡ñ React render 5 ms ¡ñ prom.ua workers over 750 ¡ñ number of requests split to node/python 36
- 37. 37 Problems
- 38. 38 Node.js leaks
- 41. Sometimes it¡¯s hard to analyze js errors from graph and Apollo 41
- 42. 42 Hard to split routing in monolithic app
- 43. 43 Some resources and logic need duplication
- 44. Plans ¡ñ GraphQL everywhere ¡ñ Backend as API ¡ñ Progressive web apps ¡ñ More frontends 44