24
Секретный Доклад о раутинге в React.js Андрей Листочкин

Секретный доклад о React Router - OdessaJS 2014

Embed Size (px)

Citation preview

Page 1: Секретный доклад о React Router - OdessaJS 2014

Секретный Докладо раутинге в React.jsАндрей Листочкин

Page 2: Секретный доклад о React Router - OdessaJS 2014
Page 3: Секретный доклад о React Router - OdessaJS 2014

var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; }});

React.renderComponent( <HelloMessage name="John" />, mountNode);

Hello World

Page 4: Секретный доклад о React Router - OdessaJS 2014

npm, Common JS, components

ТРУ

Page 5: Секретный доклад о React Router - OdessaJS 2014

DOM Diff, Lean, Perf, etc

Перспективен

Page 6: Секретный доклад о React Router - OdessaJS 2014

MVC+R

Page 7: Секретный доклад о React Router - OdessaJS 2014

MVC+R

Page 8: Секретный доклад о React Router - OdessaJS 2014

Routing

Page 9: Секретный доклад о React Router - OdessaJS 2014

sharing, liver-reload-ability, bookmarks, SEO

URL

Page 10: Секретный доклад о React Router - OdessaJS 2014

URL =

Телефонный номер

Page 11: Секретный доклад о React Router - OdessaJS 2014

director Backbone react-router react-router-component Aviator Finch

Routers

Page 12: Секретный доклад о React Router - OdessaJS 2014
Page 13: Секретный доклад о React Router - OdessaJS 2014
Page 14: Секретный доклад о React Router - OdessaJS 2014

A framework for creating ambitious web applications

Page 15: Секретный доклад о React Router - OdessaJS 2014

Ambitious applications — url-driven applications

Page 16: Секретный доклад о React Router - OdessaJS 2014

URL

https://myapp.com/posts/1

PostsRoutePostsController<posts> {{outlet}}

PostRoutePostController<post>

Page 17: Секретный доклад о React Router - OdessaJS 2014

Ember JS + React ViewsHTMLBars

Page 18: Секретный доклад о React Router - OdessaJS 2014

React + Ember Router

Page 20: Секретный доклад о React Router - OdessaJS 2014

Nested views mapped to nested routesModular construction of route hierarchyFully asynchronous transition hooksTransition abort / redirect / retryDynamic segmentsQuery parametersLinks with automatic .active class when their route is activeMultiple root routesHash or HTML5 history URLs

Page 22: Секретный доклад о React Router - OdessaJS 2014
Page 23: Секретный доклад о React Router - OdessaJS 2014

MVC+R

Page 24: Секретный доклад о React Router - OdessaJS 2014

@listochkin