-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy path2015.html
More file actions
9 lines (9 loc) · 105 KB
/
2015.html
File metadata and controls
9 lines (9 loc) · 105 KB
1
2
3
4
5
6
7
8
9
<!doctype html> <html> <head> <meta charset=utf-8> <meta name=description> <meta name=viewport content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>ReactEurope - The first React.js European conference in Paris, France</title> <link rel=stylesheet href=styles/vendor.css> <link rel=stylesheet href=styles/fonts/font.css> <link rel=stylesheet href=styles/main.css> <script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-42478610-5', 'auto');ga('require', 'displayfeatures');ga('send', 'pageview');
</script> </head> <body data-spy=scroll data-target=.navbar> <!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]--> <nav class="navbar navbar-default navbar-fixed-top" role=navigation> <div class=container> <div class=navbar-header role=select> <button type=button class="navbar-toggle collapsed" data-toggle=collapse data-target=.navbar-collapse> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a class=navbar-brand href=#> <span> <img src=images/reacteurope.png height=20 alt="React Europe navbar"> </span> <span> ReactEurope 2015 </span> </a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active-re hidden-sm hide"><a href=#about>About</a></li> <li><a href=#speakers>Speakers</a></li> <li><a href=#schedule>Schedule</a></li> <li><a class="hidden-sm formation-link hidden" href=/formation.html target=_blank data-toggle=tooltip data-placement=bottom title="Bénéficiez de l'aide à la formation professionnelle grâce à Oxiane! Pour tout renseignement, appelez le 01 55 60 76 72.">Formation</a></li> <li><a href=#getting-there>Getting There</a></li> <li><a href=#sponsors>Sponsors</a></li> <li><a href=#job-board>Jobs</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="active-re hidden-sm"> <a class=navbar-tickets href=# role=button data-toggle=modal data-target=#ticketModal>Tickets</a> </li> </ul> </div> </div> </nav> <section id=home> <div class=container> <div class=row id=vertical-center-header> <div class="col-lg-5 ticket-offset col-sm-5 col-sm-offset-2 col-xs-6 col-xs-offset-1" id=text-react> <p id=name-react>ReactEurope</p> <p id=date-react class="visible-sm-block visible-md-block visible-lg-block"> <a href=webcal://react-europe.org/docs/react-europe-calendar.ics> <span id=react-date-link>July 02 & 03, 2015</span></a> — PARIS, FRANCE</p> <p id=date-react class=visible-xs-block>July 02 & 03 <span id=city>PARIS, FRANCE</span></p> <div class=header-social> <a href="https://www.facebook.com/ReactEurope?fref=ts" target=_blank><span class="fa fa-facebook-square fa-2x"></span></a> <a href=https://twitter.com/ReactEurope target=_blank><span class="fa fa-twitter-square fa-2x"></span></a> <a href=https://plus.google.com/108919477429469748686 rel=publisher target=_blank><span class="fa fa-google-plus-square fa-2x" target=_blank></span></a> </div> </div> <div class="col-lg-5 col-xs-5 col-sm-5" id=logo-react> <img class=img-responsive src=images/reacteurope.png alt="React Europe" width=300 height=300> </div> </div> </div> </section> <section id=about> <div class=container> <div class=row> <h2 class="title thin">About React.js</h2> <div class="col-xs-12 col-md-offset-2 col-md-8"> <p> For more than a year now, React.js has changed the way we think about client-side applications through concepts such as the virtual dom, one-way data flow, immutable data structures and isomorphism.</p> <p><strong>ReactEurope is the occasion to meet the core team and other awesome members of the community to learn, socialize and have fun in the beautiful city of Paris with great food, entertainment, connectivity, prizes and more!</strong></p> <p> Join us at ReactEurope Conf to shape the future of client-side applications! </p> </div> <div class=clearfix></div> <div class="text-center wrapper-btn hide"> <a class="btn eventlama-btn" href=# role=button data-toggle=modal data-target=#ticketModal>Tickets</a> </div> </div> <div class="wrapper-btn text-center"> <a class="btn eventlama-btn hidden-xs" href=# role=button data-toggle=modal data-target=#ticketModal> Get Notified when 2016 edition tickets go on sales</a> <a class="btn eventlama-btn visible-xs" href=# role=button data-toggle=modal data-target=#ticketModal> Get 2016 tickets notifications</a> </div> </div> </section> <section id=speakers> <div class=container> <h2 class="thin title speaker-title">The Speakers</h2> <div class=row> <div class="col-lg-6 speaker"> <div class=media> <a class=media-left data-toggle=collapse data-target=#christopher> <img class="img-circle img-circle-re image-speaker" src=images/christopher-chedeau.jpg alt="Christopher Chedeau"> </a> <div class=media-body> <h4 class=media-heading> <a data-toggle=collapse data-target=#christopher>Christopher Chedeau</a> <span class=pull-right> <a href=https://twitter.com/Vjeux target=_blank> <span class="fa fa-twitter-square"></span></a> <a href="http://blog.vjeux.com/" target=_blank> <span class="fa fa-link"></span></a> <a href=https://github.com/vjeux target=_blank> <span class="fa fa-github-square"></span></a> </span> </h4> <h4 class=media-sub>Frenchy Front-end Engineer at Facebook. Working on React and React Native.</h4> <div id=christopher class=collapse> <p> Coming soon... </p> </div> </div> </div> </div> <div class="col-lg-6 speaker"> <div class=media> <a class=media-left data-toggle=collapse data-target=#cheng> <img class="img-circle img-circle-re image-speaker" src=images/cheng-lou.jpg alt="Cheng Lou"> </a> <div class=media-body> <h4 class=media-heading> <a data-toggle=collapse data-target=#cheng>Cheng Lou</a> <span class=pull-right> <a href=https://twitter.com/_chenglou target=_blank> <span class="fa fa-twitter-square"></span></a> <a href="https://www.linkedin.com/reg/join?trk=login_reg_redirect&session_redirect=https%3A%2F%2Fwww.linkedin.com%2Fprofile%2Fview%3Fid%3D279706125" target=_blank> <span class="fa fa-linkedin-square"></span></a> <a href=https://github.com/chenglou target=_blank> <span class="fa fa-github-square"></span></a> </span> </h4> <h4 class=media-sub>React core member. Currently working on animation-related problems.</h4> <div id=cheng class=collapse> <p> I started making manual animation in Flash, and never really left in spirit. </p> </div> </div> </div> </div> <div class=clearfix></div> <div class="col-lg-6 speaker"> <div class=media> <a class=media-left data-toggle=collapse data-target=#lee> <img class="img-circle img-circle-re image-speaker" src=images/lee-byron.jpg alt="Lee Byron"> </a> <div class=media-body> <h4 class=media-heading> <a data-toggle=collapse data-target=#lee>Lee Byron</a> <span class=pull-right> <a href=https://twitter.com/leeb target=_blank> <span class="fa fa-twitter-square"></span></a> <a href="http://leebyron.com/" target=_blank> <span class="fa fa-link"></span></a> <a href=https://github.com/leebyron target=_blank> <span class="fa fa-github-square"></span></a> </span> </h4> <h4 class=media-sub>Making things at Facebook since 2008: React, GraphQL, Immutable.js, Mobile, JavaScript.</h4> <div id=lee class=collapse> <p> I'm a designer, an artist, a biker, an overachiever and a dreamer. I'm always optimistically biting off more than I can chew and making the best of it. I aspire to create work which inspires and teaches while it entertains. </p> </div> </div> </div> </div> <div class="col-lg-6 speaker"> <div class=media> <a class=media-left data-toggle=collapse data-target=#nick> <img class="img-circle img-circle-re image-speaker" src=images/schrockn.jpg alt="Nick Schrock"> </a> <div class=media-body> <h4 class=media-heading> <a data-toggle=collapse data-target=#nick>Nick Schrock</a> <span class=pull-right> <a href=http://www.facebook.com/schrockn target=_blank> <span class="fa fa-facebook-square"></span></a> <a href=https://twitter.com/schrockn target=_blank> <span class="fa fa-twitter-square"></span></a> <a href=https://github.com/schrockn target=_blank> <span class="fa fa-github-square"></span></a> </span> </h4> <h4 class=media-sub>Facebook Engineer on Product Infrastructure: GraphQL co-creator, React fan boy.</h4> <div id=nick class=collapse> <p> Nick Schrock is a co-creator of GraphQL, and wrote the original version of Facebook's GraphQL engine. An original member of Facebook's Product Infrastructure team, Nick helped create the abstractions that power Facebooks's PHP data model, and built out the Facebook's iOS and Android tooling around GraphQL. </p> </div> </div> </div> </div> <div class=clearfix></div> <div class="col-lg-6 speaker"> <div class=media> <a class=media-left data-toggle=collapse data-target=#dan> <img class="img-circle img-circle-re image-speaker" src=images/dlschafer.jpg alt="Dan Schafer"> </a> <div class=media-body> <h4 class=media-heading> <a data-toggle=collapse data-target=#dan>Dan Schafer</a> <span class=pull-right> <a href=https://www.facebook.com/dschafer target=_blank> <span class="fa fa-facebook-square"></span></a> <a href=https://twitter.com/dlschafer target=_blank> <span class="fa fa-twitter-square"></span></a> <a href=https://github.com/dschafer target=_blank> <span class="fa fa-github-square"></span></a> </span> </h4> <h4 class=media-sub>Software engineer at Facebook.</h4> <div id=dan class=collapse> <p> Dan Schafer is a co-creator of GraphQL, and designed the data model backing the original GraphQL API, which powered Facebook's news feed. He added GraphQL's support for writes, and has helped maintain Facebook's GraphQL engine and APIs for almost three years. </p> </div> </div> </div> </div> <div class="col-lg-6 speaker"> <div class=media> <a class=media-left data-toggle=collapse data-target=#joseph> <img class="img-circle img-circle-re image-speaker" src=images/joseph-savona.jpg alt="Joseph Savona"> </a> <div class=media-body> <h4 class=media-heading> <a data-toggle=collapse data-target=#joseph>Joseph Savona</a> <span class=pull-right> <a href=https://twitter.com/en_js target=_blank> <span class="fa fa-twitter-square"></span></a> <a href=http://josephsavona.com target=_blank> <span class="fa fa-link"></span></a> <a href=https://github.com/josephsavona target=_blank> <span class="fa fa-github-square"></span></a> </span> </h4> <h4 class=media-sub>Software Engineer at Facebook, working on Relay and GraphQL.</h4> <div id=joseph class=collapse> <p> Joseph is an architect of Relay and contributor to React Native. He was an early adopter of React, building what is likely the first React app to be installed at a correctional facility. His previous experience includes teaching ESL abroad, interaction design and prototyping, and web/native UI development. </p> </div> </div> </div> </div> <div class=clearfix></div> <div class="col-lg-6 speaker"> <div class=media> <a class=media-left data-toggle=collapse data-target=#sahrens> <img class="img-circle img-circle-re image-speaker" src=images/spencer-ahrens.jpg alt="Spencer Ahrens"> </a> <div class=media-body> <h4 class=media-heading> <a data-toggle=collapse data-target=#sahrens>Spencer Ahrens</a> <span class=pull-right> <a href=https://www.facebook.com/spencer target=_blank> <span class="fa fa-facebook-square"></span></a> <a href=https://www.linkedin.com/pub/spencer-ahrens/6/733/360 target=_blank> <span class="fa fa-linkedin-square"></span></a> <a href=https://github.com/sahrens target=_blank> <span class="fa fa-github-square"></span></a> </span> </h4> <h4 class=media-sub>Software Engineer at Facebook, working on React Native.</h4> <div id=sahrens class=collapse> <p> Spencer has worked on a variety of projects at Facebook over the last several years including Android, iOS, and mobile web product teams, News Feed API, and Search Infrastructure. He's currently working on React Native. </p> </div> </div> </div> </div> <div class="col-lg-6 speaker"> <div class=media> <a class=media-left data-toggle=collapse data-target=#benAlpert> <img class="img-circle img-circle-re image-speaker" src=images/ben-alpert.jpeg alt="Ben Alpert"> </a> <div class=media-body> <h4 class=media-heading> <a data-toggle=collapse data-target=#benAlpert>Ben Alpert</a> <span class=pull-right> <a href=https://twitter.com/soprano target=_blank> <span class="fa fa-twitter-square"></span></a> <a href="http://benalpert.com/" target=_blank> <span class="fa fa-link"></span></a> <a href=https://github.com/spicyj target=_blank> <span class="fa fa-github-square"></span></a> </span> </h4> <h4 class=media-sub>I build things to help people. Currently making @reactjs at Facebook, previously @khanacademy.</h4> <div id=benAlpert class=collapse> <p> Coming soon... </p> </div> </div> </div> </div> <div class=clearfix></div> <div class="col-lg-6 speaker"> <div class=media> <a class=media-left data-toggle=collapse data-target=#sebastianMarkbåge> <img class="img-circle img-circle-re image-speaker" src=images/SebastianProfile.jpg alt="Sebastian Markbåge"> </a> <div class=media-body> <h4 class=media-heading> <a data-toggle=collapse data-target=#sebastianMarkbåge>Sebastian Markbåge</a> <span class=pull-right> <a href=https://twitter.com/sebmarkbage target=_blank> <span class="fa fa-twitter-square"></span></a> <a href=https://www.linkedin.com/in/sebmarkbage target=_blank> <span class="fa fa-link"></span></a> <a href="https://github.com/sebmarkbage/" target=_blank> <span class="fa fa-github-square"></span></a> </span> </h4> <h4 class=media-sub>React Core Maintainer at Facebook</h4> <div id=sebastianMarkbåge class=collapse> <p> Coming soon... </p> </div> </div> </div> </div> <div class="col-lg-6 speaker"> <div class=media> <a class=media-left data-toggle=collapse data-target=#michaelR> <img class="img-circle img-circle-re image-speaker" src=images/michael-ridgway.jpg alt="Michael Ridgway"> </a> <div class=media-body> <h4 class=media-heading> <a data-toggle=collapse data-target=#michaelR>Michael Ridgway</a> <span class=pull-right> <a href=https://twitter.com/TheRidgway target=_blank> <span class="fa fa-twitter-square"></span></a> <a href=http://theridgway.com target=_blank> <span class="fa fa-link"></span></a> <a href=https://github.com/mridgway target=_blank> <span class="fa fa-github-square"></span></a> </span> </h4> <h4 class=media-sub>JavaScript developer at Yahoo. Currently working on Fluxible: Isomorphic Flux and React.</h4> <div id=michaelR class=collapse> <p> Mike is software engineer at Yahoo working on node.js and React/Flux frontends that power high-traffic web applications. </p> </div> </div> </div> </div> <div class=clearfix></div> <div class="col-lg-6 speaker"> <div class=media> <a class=media-left data-toggle=collapse data-target=#kevin> <img class="img-circle img-circle-re image-speaker" src=images/kevin-robinson.png alt="Kevin Robinson"> </a> <div class=media-body> <h4 class=media-heading> <a data-toggle=collapse data-target=#kevin>Kevin Robinson</a> <span class=pull-right> <a href=https://twitter.com/krob target=_blank> <span class="fa fa-twitter-square"></span></a> <a href=https://www.linkedin.com/pub/kevin-robinson/4/676/11a target=_blank><span class="fa fa-linkedin-square"></span></a> <a href=https://github.com/kevinrobinson target=_blank> <span class="fa fa-github-square"></span></a> </span> </h4> <h4 class=media-sub>Software Engineer at Twitter.</h4> <div id=kevin class=collapse> <p> Kevin's especially interested in exploratory data science and visualization, working to create user experiencers that directly help users do what they need to to, or understand what they need to know. He loves connecting knowledge from different fields, and at the moment is particularly inspired by work from the React and ClojureScript communities. He currently works as an engineer at Twitter in Boston, as part of the Fabric team developing tools for mobile developers. In a past career, he worked as a teacher and continues to volunteer working with high-school and undergraduate students teaching about engineering. </p> </div> </div> </div> </div> <div class="col-lg-6 speaker"> <div class=media> <a class=media-left data-toggle=collapse data-target=#sebastian> <img class="img-circle img-circle-re image-speaker" src=images/sebastian-mcKenzie.png alt="Sebastian McKenzie"> </a> <div class=media-body> <h4 class=media-heading> <a data-toggle=collapse data-target=#sebastian>Sebastian McKenzie</a> <span class=pull-right> <a href=https://twitter.com/sebmck target=_blank> <span class="fa fa-twitter-square"></span></a> <a href="https://babeljs.io/" target=_blank> <span class="fa fa-link"></span></a> <a href=https://github.com/sebmck target=_blank> <span class="fa fa-github-square"></span></a> </span> </h4> <h4 class=media-sub>JavaScript fanatic, Creator of Babel (Formerly 6to5).</h4> <div id=sebastian class=collapse> <p> Sebastian McKenzie is a JavaScript enthusiast based in Sydney, Australia. He's extremely passionate about open source as well as web standards and is always looking to push the boundaries of what is possible. Sebastian is also the creator of the popular Babel compiler that's used by many React developers to bring their JSX and ES6 to life. </p> </div> </div> </div> </div> <div class=clearfix></div> <div class="col-lg-6 speaker"> <div class=media> <a class=media-left data-toggle=collapse data-target=#aria> <img class="img-circle img-circle-re image-speaker" src=images/aria-buckles.jpg alt="Aria Buckles"> </a> <div class=media-body> <h4 class=media-heading> <a data-toggle=collapse data-target=#aria>Aria Buckles</a> <span class=pull-right> <a href=https://twitter.com/ariabuckles target=_blank> <span class="fa fa-twitter-square"></span></a> <a href=https://sourcegraph.com/ariabuckles target=_blank><span class="fa fa-link"></span></a> <a href=https://github.com/ariabuckles target=_blank> <span class="fa fa-github-square"></span></a> </span> </h4> <h4 class=media-sub>Front-end engineer at Khan Academy.</h4> <div id=aria class=collapse> <p> Aria has been building interactive educational experiences with React at Khan Academy since September 2013, and maintains one of the oldest large React codebases outside of Facebook. </p> </div> </div> </div> </div> <div class="col-lg-6 speaker"> <div class=media> <a class=media-left data-toggle=collapse data-target=#jed> <img class="img-circle img-circle-re image-speaker" src=images/jed-watson.jpg alt="Jed Watson"> </a> <div class=media-body> <h4 class=media-heading> <a data-toggle=collapse data-target=#jed>Jed Watson</a> <span class=pull-right> <a href=https://twitter.com/JedWatson target=_blank> <span class="fa fa-twitter-square"></span></a> <a href=http://thinkmill.com.au target=_blank> <span class="fa fa-link"></span></a> <a href=https://github.com/JedWatson target=_blank> <span class="fa fa-github-square"></span></a> </span> </h4> <h4 class=media-sub>Partner at @thethinkmill, Javascript / node.js developer, entrepreneur, creator of @KeystoneJS and @TouchstoneJS.</h4> <div id=jed class=collapse> <p> Jed is a partner at Thinkmill in Sydney, a new development agency with a strong focus on community, open source and R&D. A javascript enthusiast, he has been developing applications on the web for over a decade. On a mission to solve hard framework problems and make developers around the world more productive, Jed is the author of TouchstoneJS, KeystoneJS (a major open source cms for node.js, also built with React.js), and a number of other components and packages available on npm and GitHub. </p> </div> </div> </div> </div> <div class=clearfix></div> <div class="col-lg-6 speaker"> <div class=media> <a class=media-left data-toggle=collapse data-target=#elie> <img class="img-circle img-circle-re image-speaker" src=images/elie-rotenberg.jpg alt="Elie Rotenberg"> </a> <div class=media-body> <h4 class=media-heading> <a data-toggle=collapse data-target=#elie>Elie Rotenberg</a> <span class=pull-right> <a href=https://twitter.com/elierotenberg target=_blank> <span class="fa fa-twitter-square"></span></a> <a href="https://elie.rotenberg.io/" target=_blank> <span class="fa fa-link"></span></a> <a href=https://github.com/elierotenberg target=_blank> <span class="fa fa-github-square"></span></a> </span> </h4> <h4 class=media-sub>Technichal oversight and member of the board of Webedia Gaming (Jeuxvideo.com, millenium.org, and more).</h4> <div id=elie class=collapse> <p> PhD in Computer Science, CTO and Software Architect at Webedia Gaming (editor of jeuxvideo.com and millenium.org), Elie Rotenberg is a specialist in designing and deploying real-time, large-scale web applications, such as Chats, Web TVs, up to tens of thousands of concurrent users. </p> </div> </div> </div> </div> <div class="col-lg-6 speaker"> <div class=media> <a class=media-left data-toggle=collapse data-target=#danA> <img class="img-circle img-circle-re image-speaker" src=images/dan-abramov.jpg alt="Dan Abramov"> </a> <div class=media-body> <h4 class=media-heading> <a data-toggle=collapse data-target=#danA>Dan Abramov</a> <span class=pull-right> <a href=https://twitter.com/dan_abramov target=_blank> <span class="fa fa-twitter-square"></span></a> <a href=https://medium.com/@dan_abramov target=_blank> <span class="fa fa-link"></span></a> <a href=https://github.com/gaearon target=_blank> <span class="fa fa-github-square"></span></a> </span> </h4> <h4 class=media-sub>I move slow and maintain things. I built React Hot Loader. In my spare time, I tame side effects. @HelloStampsy.</h4> <div id=danA class=collapse> <p> Dan is a young developer who began writing JavaScript full-time two years ago. Unsatisifed with Backbone’s shortcomings, Dan found React and Flux to be a very solid foundation for building composite and stateful user interfaces at Stampsy. Dan authored and contributed to several popular React components and libraries. Before getting into JavaScript, he used to write C# for Windows, Linux and iOS. </p> </div> </div> </div> </div> <div class=clearfix></div> <div class="col-lg-6 speaker"> <div class=media> <a class=media-left data-toggle=collapse data-target=#evan> <img class="img-circle img-circle-re image-speaker" src=images/evan-morikawa.jpg alt="Evan Morikawa"> </a> <div class=media-body> <h4 class=media-heading> <a data-toggle=collapse data-target=#evan>Evan Morikawa</a> <span class=pull-right> <a href=https://twitter.com/E0M target=_blank> <span class="fa fa-twitter-square"></span></a> <a href=https://www.linkedin.com/in/evanmorikawa target=_blank> <span class="fa fa-linkedin-square"></span></a> <a href=https://github.com/emorikawa target=_blank> <span class="fa fa-github-square"></span></a> </span> </h4> <h4 class=media-sub>Frontend @Reactjs / Flux / #AtomShell Application Engineer at @Nilas. @Proximate founder. @OlinCollege alum.</h4> <div id=evan class=collapse> <p> Currently a frontend application engineer at Nilas. Before building email clients, Evan founded & customer-funded Proximate, was a dev-in-residence at Techstars, and graduated Olin College of Engineering with a CS degree. </p> </div> </div> </div> </div> <div class="col-lg-6 speaker"> <div class=media> <a class=media-left data-toggle=collapse data-target=#benG> <img class="img-circle img-circle-re image-speaker" src=images/ben-gotow.jpg alt="Ben Gotow"> </a> <div class=media-body> <h4 class=media-heading> <a data-toggle=collapse data-target=#benG>Ben Gotow</a> <span class=pull-right> <a href=https://twitter.com/bengotow target=_blank> <span class="fa fa-twitter-square"></span></a> <a href="http://foundry376.com/" target=_blank> <span class="fa fa-link"></span></a> <a href=https://github.com/bengotow target=_blank> <span class="fa fa-github-square"></span></a> </span> </h4> <h4 class=media-sub>Incurable builder. Principal of @Foundry376, front-end engineer at @Nilas. Developer of more than 20 iOS apps and the @SparkInspector.</h4> <div id=benG class=collapse> <p> Incurable builder, front-end product engineer at Nilas. Formerly principal of @Foundry376, developer of more than 20 iOS apps and the @SparkInspector. Studied HCI at Carnegie Mellon and CS at Vanderbilt University. </p> </div> </div> </div> </div> <div class=clearfix></div> <div class="col-lg-6 speaker"> <div class=media> <a class=media-left data-toggle=collapse data-target=#mikhail> <img class="img-circle img-circle-re image-speaker" src=images/mikhail-davydov.jpg alt="Evan Morikawa"> </a> <div class=media-body> <h4 class=media-heading> <a data-toggle=collapse data-target=#mikhail>Mikhail Davydov</a> <span class=pull-right> <a href=https://twitter.com/azproduction target=_blank> <span class="fa fa-twitter-square"></span></a> <a href=http://azproduction.ru target=_blank> <span class="fa fa-link"></span></a> <a href=https://github.com/azproduction target=_blank> <span class="fa fa-github-square"></span></a> </span> </h4> <h4 class=media-sub>Frontend JavaScript Application Developer and Web Application Developer Nodejs.</h4> <div id=mikhail class=collapse> <p> Mikhail is a full stack JavaScript developer at Productive Mobile and currently working on project which transforms enterprise web applications into mobile. Before that time he worked for Yandex and taught about 200 developers to write awesome JavaScript apps. He has many talks and lectures about JavaScript and related technotogies. On leisure time he takes pictures and tries to marry technology and photography in his "2layer photo-project". </p> </div> </div> </div> </div> <div class="col-lg-6 speaker"> <div class=media> <a class=media-left data-toggle=collapse data-target=#michael> <img class="img-circle img-circle-re image-speaker" src=images/michael-chan.jpg alt="Michael Chan"> </a> <div class=media-body> <h4 class=media-heading> <a data-toggle=collapse data-target=#michael>Michael Chan</a> <span class=pull-right> <a href=https://twitter.com/chantastic target=_blank> <span class="fa fa-twitter-square"></span></a> <a href=http://chantastic.io target=_blank> <span class="fa fa-link"></span></a> <a href=https://github.com/chantastic target=_blank> <span class="fa fa-github-square"></span></a> </span> </h4> <h4 class=media-sub>Web Developer at Ministry Centered Technologies.</h4> <div id=michael class=collapse> <p> Michael Chan is no special flower. He loves ramen and helping JS n00bs learn React. Michael is a developer at Planning Center Online where he gleefully creates shared libraries and components for Planning Center's six applications. Last spring he built the company's first React application, Services Live 3, and continues to develop practices and patterns for writing React.js on Rails. </p> </div> </div> </div> </div> <div class=clearfix></div> <div class="col-lg-6 speaker"> <div class=media> <a class=media-left data-toggle=collapse data-target=#michaelJackson> <img class="img-circle img-circle-re image-speaker" src=images/michael-jackson.jpg alt="Michael Jackson"> </a> <div class=media-body> <h4 class=media-heading> <a data-toggle=collapse data-target=#michaelJackson>Michael Jackson</a> <span class=pull-right> <a href=https://twitter.com/mjackson target=_blank> <span class="fa fa-twitter-square"></span></a> <a href="https://reactjs-training.com/" target=_blank> <span class="fa fa-link"></span></a> <a href=https://github.com/mjackson target=_blank> <span class="fa fa-github-square"></span></a> </span> </h4> <h4 class=media-sub>Thriller. Previously @ycombinator S2013, @twitter and @path.</h4> <div id=michaelJackson class=collapse> <p> Coming soon... </p> </div> </div> </div> </div> <div class="col-lg-6 speaker"> <div class=media> <a class=media-left data-toggle=collapse data-target=#ryan> <img class="img-circle img-circle-re image-speaker" src=images/ryan-florence.jpg alt="Ryan Florence"> </a> <div class=media-body> <h4 class=media-heading> <a data-toggle=collapse data-target=#ryan>Ryan Florence</a> <span class=pull-right> <a href=https://twitter.com/ryanflorence target=_blank> <span class="fa fa-twitter-square"></span></a> <a href="https://reactjs-training.com/" target=_blank> <span class="fa fa-link"></span></a> <a href=https://github.com/ryanflorence target=_blank> <span class="fa fa-github-square"></span></a> </span> </h4> <h4 class=media-sub>JavaScript Consultant/Trainer, co-author of React Router.</h4> <div id=ryan class=collapse> <p> Coming soon... </p> </div> </div> </div> </div> <div class=clearfix></div> </div> </div> </section> <section id=schedule> <div class=container> <h2 class="thin title">The Schedule</h2> <div class=panel-group id=accordion role=tablist aria-multiselectable=true> <div class="panel panel-default"> <div class=panel-heading role=tab id=headingCero> <h4 class=panel-title> <a data-toggle=collapse data-parent=#accordion href=#collapseCero aria-expanded=true aria-controls=collapseCero class=collapsed> <span class="fa fa-calendar fa-calendar-react"></span> <span class=calendar-day>Day 1</span> <small> - Tuesday 30th June</small> <span class="fa fa-plus-circle plus-icon-schedule"></span> </a> </h4> </div> <div id=collapseCero class="panel-collapse collapse" role=tabpanel aria-labelledby=headingOne> <div class=panel-body> <ul class=media-list> <div class=media-container> <li class=media> <div class=media-left> <div class=media-left-re> <img class="img-circle img-circle-re img-responsive center-block" src=images/ryan-florence.jpg alt="Ryan Florence"> <img class="img-circle img-circle-re img-responsive center-block img-circle-speaker2" src=images/michael-jackson.jpg alt="Michael Jackson"> <div class=container-media-icons> <span class="fa fa-clock-o media-icons"> </span> <span class=time-label>09:00-17:00</span> </div> </div> </div> <div class="media-body media-right"> <a class=anchor id=workshop1></a> <h3 class="media-heading media-heading-re"> A two-day workshop with <a href=https://twitter.com/ryanflorence>Ryan Florence</a> and <a href=https://twitter.com/mjackson>Michael Jackson</a>. </h3> <div class=panel-heading> <table class="table table-bordered schedule-table"> <thead> <tr> <th></th> <th>Tue<span class=hidden-xs>sday</span> 30th June</th> </tr> </thead> <tbody> <tr class=special> <td>9:00-9:30</td> <td>Registration and French Breakfast</td> </tr> <tr> <td>9:30–9:40</td> <td> <div>Setup, overview of codebase</div> <div>Michael</div> </td> </tr> <tr> <td>9:40–10:45</td> <td> <div>Thinking in React</div> <div>Ryan</div> </td> </tr> <tr class=special> <td>10:45–11:00</td> <td>Break</td> </tr> <tr> <td>11:00–12:00</td> <td> <div>How do I encapsulate UI?</div> <div>Michael</div> </td> </tr> <tr class=special> <td>12:00–13:00</td> <td>Lunch</td> </tr> <tr> <td>13:00–14:00</td> <td> <div>How do I test React code?</div> <div>Michael</div> </td> </tr> <tr> <td>14:00-14:45</td> <td> <div>In-depth look at the React programming model</div> <div>Ryan</div> </td> </tr> <tr class=special> <td>14:45-15:00</td> <td>Break</td> </tr> <tr> <td>15:00–16:00</td> <td> <div>When do I use props vs. state?</div> <div>Ryan</div> </td> </tr> <tr> <td>16:00–17:00</td> <td> <div>How do I build an app?</div> <div>Michael</div> </td> </tr> </tbody> </table> </div> <a></a> </div> </li> </div> <div class="media-container hidden formation-ticket"> <li class=media> <div class=media-left> <div class=media-left-re> <img class="img-circle img-circle-re img-responsive center-block" src=images/khalid.jpg alt="Khalid Jebbari"> <div class=container-media-icons> <span class="fa fa-clock-o media-icons"> </span> <span class=time-label>09:00-17:30</span> </div> </div> </div> <div class="media-body media-right"> <a class=anchor id=workshop1></a> <h3 class="media-heading media-heading-re"> Formation en français avec <a href=https://twitter.com/dj3bbz>Khalid Jebbari</a>. </h3> <p> Venez vous initier à React.js le temps d'une journée avec l'un des plus grands specialistes React.js sur Paris. <ul> <li> Niveau javascript requis: intermediare </li> <li> Niveau ReactJS requis: débutant </li> </ul> </p> <a></a> </div> </li> </div> </ul> </div> </div> </div> <div class="panel panel-default"> <div class=panel-heading role=tab id=headingOne> <h4 class=panel-title> <a data-toggle=collapse data-parent=#accordion href=#collapseOne aria-expanded=true aria-controls=collapseOne> <span class="fa fa-calendar fa-calendar-react"></span> <span class=calendar-day>Day 2</span> <small> - Wednesday 1st July</small> <span class="fa fa-plus-circle plus-icon-schedule"></span> </a> </h4> </div> <div id=collapseOne class="panel-collapse collapse" role=tabpanel aria-labelledby=headingOne> <div class=panel-body> <div class=media-container> <div class=media> <div class=media-left> <div class=media-left-re> <img class="img-circle img-circle-re img-responsive center-block" src=images/ryan-florence.jpg alt="Ryan Florence"> <img class="img-circle img-circle-re img-responsive center-block img-circle-speaker2" src=images/michael-jackson.jpg alt="Michael Jackson"> <div class=container-media-icons> <span class="fa fa-clock-o media-icons"> </span> <span class=time-label>09:00-17:00</span> </div> </div> </div> <div class="media-body media-right"> <a class=anchor></a> <h3 class="media-heading media-heading-re">Ryan Florence and Michael Jackson Workshop Day 2</h3> <div class=panel-heading> <table class="table table-bordered schedule-table"> <thead> <tr> <th></th> <th>Wed<span class=hidden-xs>nesday</span> 1st July</th> </tr> </thead> <tbody> <tr class=special> <td>9:00-9:30</td> <td>French Breakfast</td> </tr> <tr> <td>9:30–9:45</td> <td> <div>Q&A from Day 1</div> <div></div> </td> </tr> <tr> <td>9:45–10:45</td> <td> <div>How do I migrate to React from my existing app?</div> <div>Ryan</div> </td> </tr> <tr class=special> <td>10:45–11:00</td> <td>Break</td> </tr> <tr> <td>11:00–12:00</td> <td> <div>What is Flux and how/when would I use it?</div> <div>Michael</div> </td> </tr> <tr class=special> <td>12:00–13:00</td> <td>Lunch</td> </tr> <tr> <td>13:00–14:00</td> <td> <div>How do I build a full-page app with React Router?</div> <div>Ryan</div> </td> </tr> <tr> <td>14:00-14:45</td> <td> <div>How do I animate transitions in my React app?</div> <div>Michael</div> </td> </tr> <tr class=special> <td>14:45-15:00</td> <td>Break</td> </tr> <tr> <td>15:00–16:00</td> <td> <div>How can I improve the performance of my React app?</div> <div>Michael</div> </td> </tr> <tr> <td>16:00–17:00</td> <td> <div>How do I deploy my React app?</div> <div>Ryan</div> </td> </tr> </tbody> </table> </div> </div> </div> </div> <div class=media-container> <div class=media> <div class="media-left media-left-ht"> <div class="media-left-square media-left-square-ht"> <img class="img-square-re img-responsive center-block" src=images/mozilla-office.jpeg alt=Mozilla> <div class=container-media-icons> <span class="fa fa-clock-o media-icons"> </span> <span class=time-label>9:00-18:30</span> </div> </div> </div> <div class="media-body media-right"> <a class=anchor id=hackathon></a> <h3 class="media-heading media-heading-re">ReactEurope Hackathon</h3> <p> Hackathon will take place at Mozilla HQ from 9am to 6:30pm with great prizes for the winners and guests stars featuring the creators of React Native, Babel.js, React Hot Loader and more! <a href=https://medium.com/@patcito/announcing-the-reacteurope-hackathon-at-mozilla-paris-60e8105b85eb target=_blank>Read all about it here</a>. </p> <div class="foot hidden-xs"> <div class=name><i class="fa fa-star"></i>Christopher Chedeau</div> <div class=name>Ben Alpert</div> <div class=name>Sebastian McKenzie</div> <div class=name>Lee Byron</div> <div class=name>Dan Abramov...</div> </div> <div class="foot visible-xs"> <div class=name><i class="fa fa-star"></i>Christopher Chedeau, Ben Alpert, Sebastian McKenzie, Lee Byron, Dan Abramov...</div> </div> </div> </div> </div> <div class=media-container> <div class=media> <div class=media-left> <div class="media-left-re media-left-square-np"> <div class=icon-beers alt="Bar Night Party">🍻</div> <div class=container-media-icons> <span class="fa fa-clock-o media-icons"> </span> <span class=time-label>18:45</span> </div> </div> </div> <div class="media-body media-right"> <a class=anchor></a> <h3 class="media-heading media-heading-re">Bar Night Party 🍹🍸🎉🍟🍔</h3> <p> Our awesome sponsor <a href="http://red-badger.com/" target=_blank>RedBadger</a> will be organizing a bar night at <a href=http://www.frogpubs.com/index.php target=_blank>The Frog at Bercy Village</a>, a brewery located at a 15-minute walk from the venue. Simply show one of the Red Badger team your conference ticket to receive your wristband which you can flash at the bar for free drinks. The Frog is located at Bercy Village which is a pedestrian street full of bars and restaurants. It offers both alcoholic and non alcoholic drinks as well as food. </p> </div> </div> </div> <div class=media-container> <div class=media> <div class=media-left> <div class=media-left-re> <div class=container-media-time> <span class="fa fa-clock-o media-icons"> </span> <span class=time-label>19:30</span> </div> </div> </div> <div class="media-body media-right"> <a class=anchor></a> <h3 class="media-heading media-heading-re"> Speaker dinner</h3> <p> </p> </div> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class=panel-heading role=tab id=headingTwo> <h4 class=panel-title> <a class=collapsed data-toggle=collapse data-parent=#accordion href=#collapseTwo aria-expanded=false aria-controls=collapseTwo> <span class="fa fa-calendar fa-calendar-react"></span> <span class=calendar-day>Day 3</span> <small> - Thursday 2nd July</small> <span class="fa fa-plus-circle plus-icon-schedule"></span> </a> </h4> </div> <div id=collapseTwo class="panel-collapse collapse in" role=tabpanel aria-labelledby=headingTwo> <div class=panel-body> <ul class=media-list> <div class=media-container> <li class=media> <div class=media-left> <div class=media-left-re> <img class="img-circle img-circle-re img-responsive center-block" src=images/christopher-chedeau.jpg alt=speaker1> <div class=container-media-icons> <span class="fa fa-clock-o media-icons"> </span> <span class=time-label>10:00</span> </div> </div> </div> <div class="media-body media-right"> <a class=anchor id=keynote></a> <h3 class="media-heading media-heading-re">keynote</h3> <p> </p> <a id=inline-styles-anchor></a> <div class=foot> <div class=name> <a class=hvr-grow href=https://medium.com/@patcito/reacteurope-interview-19-christopher-chedeau-b191e0f67286 target=_blank> <i class="fa fa-microphone"></i> </a> Christopher Chedeau </div> <div class=links> <a href=https://twitter.com/Vjeux target=_blank><i class="fa fa-twitter"></i></a> <a href="http://blog.vjeux.com/" target=_blank><i class="fa fa-link"></i></a> <a href=https://github.com/vjeux target=_blank><i class="fa fa-github"></i></a> </div> </div> </div> </li> </div> <div class=media-container> <li class=media> <div class=media-left> <div class=media-left-re> <img class="img-circle img-circle-re img-responsive center-block" src=images/michael-chan.jpg> <div class=container-media-icons> <span class="fa fa-clock-o media-icons"></span> <span class=time-label>10:30</span> </div> </div> </div> <div class="media-body media-right" id=inline-styles-talk> <a href=#inline-styles-anchor> <h3 class="media-heading media-heading-re">Inline Styles: themes, media queries, contexts, and when it's best to use CSS</h3></a> <p> React allows you to write styles inline and bypass a host of CSS shortcomings. Scope, dependency management, dead code elimination, these problems go away when adding your styles directly to components. But it's not all rainbows and unicorns. Things like theming and media queries become much more difficult when all your styles live directly on components. In this talk, we'll look at how to solve these problems with contexts and plain old JavaScript. We'll also look at the role of container-components and when it's better to "just use CSS." </p> <a id=flux-anchor></a> <div class=foot> <div class=name> <a class=hvr-grow href=https://medium.com/@patcito/reacteurope-interview-10-michael-chan-f47183912785 target=_blank> <i class="fa fa-microphone"></i> </a> Michael Chan </div> <div class=links> <a href=https://twitter.com/chantastic target=_blank><i class="fa fa-twitter"></i></a> <a href=http://chantastic.io target=_blank><i class="fa fa-link"></i></a> <a href=https://github.com/chantastic target=_blank><i class="fa fa-github"></i></a> </div> </div> </div> </li> </div> <div class=media-container> <li class=media> <div class=media-left> <div class=media-left-re> <img class="img-circle img-circle-re img-responsive center-block" src=images/elie-rotenberg.jpg> <div class=container-media-icons> <span class="fa fa-clock-o media-icons"></span> <span class=time-label>11:30</span> </div> </div> </div> <div class="media-body media-right" id=flux-talk> <a href=#flux-anchor> <h3 class="media-heading media-heading-re">Flux over the Wire</h3> </a> <p> Flux is most often used to implement shared state within a single window. But done properly, this architecture can be used to implement real-time, multi-user shared state between many users of the same web applications. Using HTTP requests to dispatch stores, and Websocket to broadcast updates, Flux over the Wire has the potential to trivialize several hard problems. While the idea of using Websockets to back Flux is rather straightforward, doing it in a way that scales up to tens of thousands of concurrent viewers can prove challenging. In addition, Flux over the Wire offers an interface which considerably eases server-side rendering, as it completely abstracts data fetching and data syncing from the React views that tap into its stores and dispatch its actions. </p> <a id=react-native-anchor></a> <div class=foot> <div class=name> <a class=hvr-grow href=https://medium.com/@patcito/reacteurope-interview-2-elie-rotenberg-20d2bec578ad target=_blank> <i class="fa fa-microphone"></i> </a> Elie Rotenberg </div> <div class=links> <a href=https://twitter.com/elierotenberg target=_blank><i class="fa fa-twitter"></i></a> <a href="https://elie.rotenberg.io/" target=_blank><i class="fa fa-link"></i></a> <a href=https://github.com/elierotenberg target=_blank><i class="fa fa-github"></i></a> </div> </div> </div> </li> </div> <div class=media-container> <li class=media> <div class=media-left> <div class=media-left-re> <img class="img-circle img-circle-re img-responsive center-block" src=images/spencer-ahrens.jpg> <div class=container-media-icons> <span class="fa fa-clock-o media-icons"></span> <span class=time-label>12:00</span> </div> </div> </div> <div class="media-body media-right" id=react-native-talk> <a href=#react-native-anchor> <h3 class="media-heading media-heading-re">React Native: Building Fluid User Experiences</h3> </a> <p> React Native's architecture has opened up many possibilities for re-inventing the clunkier aspects of UX construction on traditional platforms, making it easier and faster to build world-class experiences. This talk will walk through building an advanced gestural UI leveraging the unique power of the React Native layout and animation systems to build a complex and fluid experience. </p> <a id=exploring-graphQL-anchor></a> <div class=foot> <div class=name> <a class=hvr-grow href=https://medium.com/@patcito/reacteurope-interview-9-spencer-arhens-72c50c7e7abb target=_blank> <i class="fa fa-microphone"></i> </a> Spencer Ahrens </div> <div class=links> <a href=https://www.facebook.com/spencer target=_blank><i class="fa fa-facebook"></i></a> <a href=https://www.linkedin.com/pub/spencer-ahrens/6/733/360 target=_blank><i class="fa fa-linkedin"></i></a> <a href=https://github.com/sahrens target=_blank><i class="fa fa-github"></i></a> </div> </div> </div> </li> </div> <div class=media-container> <li class=media> <div class=media-left> <div class=media-left-re> <img class="img-circle img-circle-re img-responsive center-block" src=images/lee-byron.jpg alt="Lee Byron"> <div class=container-media-icons> <span class="fa fa-clock-o media-icons"></span> <span class=time-label>14:00</span> </div> </div> </div> <div class="media-body media-right" id=exploring-graphQL-talk> <a href=#exploring-graphQL-anchor> <h3 class="media-heading media-heading-re">Exploring GraphQL</h3> </a> <p> At React.js Conf last January, we introduced the idea of GraphQL: a data fetching language that allows clients to declaratively describe their data requirements. Let's explore more of GraphQL, it's core principles, how it works, and what makes it a powerful tool. </p> <a id=website-anchor></a> <div class=foot> <div class=name> <a class=hvr-grow href=https://medium.com/@patcito/reacteurope-interview-18-lee-byron-af81838df52a target=_blank> <i class="fa fa-microphone"></i> </a> Lee Byron </div> <div class=links> <a href=https://twitter.com/leeb target=_blank><i class="fa fa-twitter"></i></a> <a href="http://leebyron.com/" target=_blank><i class="fa fa-linkedin"></i></a> <a href=https://github.com/leebyron target=_blank><i class="fa fa-github"></i></a> </div> </div> </div> </li> </div> <div class=media-container> <li class=media> <div class=media-left> <div class=media-left-re> <img class="img-responsive img-circle img-circle-re center-block" src=images/ryan-florence.jpg alt="Ryan Florence"> <div class=container-media-icons> <span class="fa fa-clock-o media-icons"></span> <span class=time-label>14:30</span> </div> </div> </div> <div class="media-body media-right" id=website-talk> <a href=#website-anchor> <h3 class="media-heading media-heading-re">Don't Rewrite, React!</h3> </a> <p> Your front and back ends are already successfully in production but you don't have to miss out on the productivity that React brings. Forget the rewrites, this is brownfield! </p> <a id=reloading-anchor></a> <div class=foot> <div class=name> <a class=hvr-grow href=https://medium.com/@patcito/reacteurope-interview-16-ryan-florence-cc9e89f8ee1 target=_blank> <i class="fa fa-microphone"></i> </a> Ryan Florence </div> <div class=links> <a href=https://twitter.com/ryanflorence target=_blank><i class="fa fa-twitter"></i></a> <a href="https://reactjs-training.com/" target=_blank><i class="fa fa-link"></i></a> <a href=https://github.com/ryanflorence target=_blank><i class="fa fa-github"></i></a> </div> </div> </div> </li> </div> <div class=media-container> <li class=media> <div class=media-left> <div class=media-left-re> <img class="img-circle img-circle-re img-responsive center-block" src=images/dan-abramov.jpg> <div class=container-media-icons> <span class="fa fa-clock-o media-icons"></span> <span class=time-label>15:30</span> </div> </div> </div> <div class="media-body media-right" id=reloading-talk> <a href=#reloading-anchor> <h3 class="media-heading media-heading-re">Live React: Hot Reloading with Time Travel</h3></a> <p> React’s unique strength is bringing to JavaScript development some of the benefits previously exclusive to more radically functional languages such as Elm and ClojureScript, without forcing you to completely eschew local state or rewrite code with exclusively immutable data structures. In this talk, Dan will demonstrate how React can be used together with Webpack Hot Module Replacement to create a live editing environment with time travel that supercharges your debugging experience and transforms the way you work on real apps every day. </p> <a id=relay-anchor></a> <div class=foot> <div class=name> <a class=hvr-grow href=https://medium.com/@patcito/first-reacteurope-interview-dan-abramov-de328761cd5a target=_blank> <i class="fa fa-microphone"></i> </a> Dan Abramov </div> <div class=links> <a href=https://twitter.com/dan_abramov target=_blank><i class="fa fa-twitter"></i></a> <a href=https://medium.com/@dan_abramov target=_blank> <span class="fa fa-link"></span></a> <a href=https://github.com/gaearon target=_blank><i class="fa fa-github"></i></a> </div> </div> </div> </li> </div> <div class=media-container> <li class=media> <div class=media-left> <div class=media-left-re> <img class="img-circle img-circle-re img-responsive center-block" src=images/joseph-savona.jpg> <div class=container-media-icons> <span class="fa fa-clock-o media-icons"></span> <span class=time-label>16:00</span> </div> </div> </div> <div class="media-body media-right" id=relay-talk> <a href=#relay-anchor> <h3 class="media-heading media-heading-re">Relay: An Application Framework For React</h3></a> <p> Relay is a new framework from Facebook that enables declarative data fetching & updates for React applications. Relay components use GraphQL to specify their data requirements, and compose together to form truly modular applications. This talk will explore the problems Relay solves, its architecture and the query lifecycle, and how can you use Relay to build more scalable apps. We’ll also see examples of how Relay powers applications as complex as the Facebook News Feed. </p> <a id=back-text-anchor></a> <div class=foot> <div class=name> <a class=hvr-grow href=https://medium.com/@patcito/reacteurope-interview-11-joseph-savona-4c0a5fb92193 target=_blank> <i class="fa fa-microphone"></i> </a> Joseph Savona </div> <div class=links> <a href=https://twitter.com/en_js target=_blank><i class="fa fa-twitter"></i></a> <a href=http://josephsavona.com target=_blank><i class="fa fa-link"></i></a> <a href=https://github.com/josephsavona target=_blank><i class="fa fa-github"></i></a> </div> </div> </div> </li> </div> <div class=media-container> <li class=media> <div class=media-left> <div class=media-left-re> <img class="img-circle img-circle-re img-responsive center-block" src=images/mikhail-davydov.jpg> <div class=container-media-icons> <span class="fa fa-clock-o media-icons"></span> <span class=time-label>17:00</span> </div> </div> </div> <div class="media-body media-right" id=back-text-talk> <a href=#back-text-anchor> <h3 class="media-heading media-heading-re">Back to Text UI</h3> </a> <p> Paradoxically that today it is easier to create GUI than Text UI. Developer has an arsenal of different GUI libraries and layout engines. When one decides to write Terminal Text UI app he faces obstacles of Text UI DSL Library, imperative layouts, constantly increasing complexity and underdeveloped approaches. In this talk I will show you how to ask browser layout engine for help, how to avoid slavery of DSL and build declarative Text UI using only web-technologies like HTML, JS, CSS and React. </p> <a id=dom-anchor></a> <div class=foot> <div class=name> <a class=hvr-grow href=https://medium.com/@patcito/reacteurope-interview-3-mikhail-davydov-3c72924d52ee target=_blank> <i class="fa fa-microphone"></i> </a> Mikhail Davydov </div> <div class=links> <a href=https://twitter.com/azproduction target=_blank><i class="fa fa-twitter"></i></a> <a href=http://azproduction.ru target=_blank><i class="fa fa-linkedin"></i></a> <a href=https://github.com/azproduction target=_blank><i class="fa fa-github"></i></a> </div> </div> </div> </li> </div> <div class=media-container> <li class=media> <div class=media-left> <div class=media-left-re> <img class="img-circle img-circle-re img-responsive center-block" src=images/SebastianProfile.jpg> <div class=container-media-icons> <span class="fa fa-clock-o media-icons"></span> <span class=time-label>17:30</span> </div> </div> </div> <div class="media-body media-right" id=dom> <a href=#dom-anchor> <h3 class="media-heading media-heading-re">DOM as a Second-class Citizen</h3> </a> <p> React has always been about the Virtual DOM. A nice way to render HTML (and some of SVG and maybe some Web Components). Although there's also react-art, react-three, react-canvas, react-curses... Oh, and react-native! Even if you bottom out at HTML, most of what React does really well is rendering to OTHER React components. Meanwhile most projects still try to retrofit our needs into HTML and CSS primitives. I'll talk about why the DOM is flawed and how it is becoming a second-class citizen in the land of React apps. </p> <div class=foot> <div class=name> <a class=hvr-grow href=https://medium.com/@patcito/reacteurope-interview-17-sebastian-markb%C3%A5ge-23bef96905af target=_blank> <i class="fa fa-microphone"></i> </a> Sebastian Markbåge </div> <div class=links> <a href=https://twitter.com/sebmarkbage target=_blank><i class="fa fa-twitter"></i></a> <a href=https://www.linkedin.com/in/sebmarkbage target=_blank><i class="fa fa-linkedin"></i></a> <a href="https://github.com/sebmarkbage/" target=_blank><i class="fa fa-github"></i></a> </div> </div> </div> </li> </div> <div class=media-container> <li class=media> <div class=media-left> <div class=media-left-re> <img class="img-responsive img-circle center-block" src=images/reacteurope.png> <div class=container-media-icons> <span class="fa fa-clock-o media-icons"></span> <span class=time-label>18:00</span> </div> </div> </div> <div class="media-body media-right"> <h3 class="media-heading media-heading-re"><a href=https://medium.com/@patcito/reacteurope-ligthning-sessions-bc8461b93d4f target=_blank>Lightning talks</a></h3> </div> </li> </div> </ul> </div> </div> </div> <div class="panel panel-default"> <div class=panel-heading role=tab id=headingThree> <a id=workflow-anchor></a> <h4 class=panel-title> <a class=collapsed data-toggle=collapse data-parent=#accordion href=#collapseThree aria-expanded=false aria-controls=collapseThree> <span class="fa fa-calendar fa-calendar-react"></span> <span class=calendar-day>Day 4</span> <small> - Friday 3rd July</small> <span class="fa fa-plus-circle plus-icon-schedule"></span> </a> </h4> </div> <div id=collapseThree class="panel-collapse collapse in" role=tabpanel aria-labelledby=headingThree> <div class=panel-body> <ul class=media-list> <div class=media-container> <li class=media> <div class=media-left> <div class=media-left-re> <img class="img-circle img-circle-re img-responsive center-block" src=images/sebastian-mcKenzie.png alt=speaker1> <div class=container-media-icons> <span class="fa fa-clock-o media-icons"> </span> <span class=time-label>10:00</span> </div> </div> </div> <div class="media-body media-right" id=workflow-talk> <a href=#workflow-anchor> <h3 class="media-heading media-heading-re">Improving Your Workflow With Code Transformation</h3> </a> <p> Most React developers already use a build pipeline to transform their JSX into vanilla JavaScript. This is usually under-utilised only doing basic transformations such as concatenation, minification and linting. In this talk, Sebastian will go over how this already existing infrastructure can be further utilised to perform even more significant code transformations such as transpilation, optimisation, profiling and more, reducing bugs, making your code faster and you as a developer more productive and happy. </p> <a id=animation-anchor></a> <div class=foot> <div class=name> <a class=hvr-grow href=https://medium.com/@patcito/reacteurope-interview-14-sebastian-mckenzie-6096aa6261da target=_blank> <i class="fa fa-microphone"></i> </a> Sebastian McKenzie </div> <div class=links> <a href=https://twitter.com/sebmck target=_blank><i class="fa fa-twitter"></i></a> <a href="https://babeljs.io/" target=_blank> <span class="fa fa-link"></span></a> <a href=https://github.com/sebmck target=_blank><i class="fa fa-github"></i></a> </div> </div> </div> </li> </div> <div class=media-container> <li class=media> <div class=media-left> <div class=media-left-re> <img class="img-circle img-circle-re img-responsive center-block" src=images/cheng-lou.jpg> <div class=container-media-icons> <span class="fa fa-clock-o media-icons"></span> <span class=time-label>10:30</span> </div> </div> </div> <div class="media-body media-right" id=animation-talk> <a href=#animation-anchor> <h3 class="media-heading media-heading-re">The State of Animation in React</h3></a> <p> A talk on the past, the present and the future of animation, and the place React can potentially take in this. I will be focusing on a few experiments on animation I've done, specifically: react-tween-state, react-state-stream and some unreleased transition-group related thoughts and work. </p> <a id=data-layer-anchor></a> <div class=foot> <div class=name><i class="fa fa-microphone"></i>Cheng Lou</div> <div class=links> <a href=https://twitter.com/_chenglou target=_blank><i class="fa fa-twitter"></i></a> <a href="https://www.linkedin.com/reg/join?trk=login_reg_redirect&session_redirect=https%3A%2F%2Fwww.linkedin.com%2Fprofile%2Fview%3Fid%3D279706125" target=_blank> <span class="fa fa-linkedin-square"></span></a> <a href=https://github.com/chenglou target=_blank><i class="fa fa-github"></i></a> </div> </div> </div> </li> </div> <div class=media-container> <li class=media> <div class=media-left> <div class=media-left-re> <img class="img-circle img-circle-re img-responsive center-block" src=images/kevin-robinson.png> <div class=container-media-icons> <span class="fa fa-clock-o media-icons"></span> <span class=time-label>11:30</span> </div> </div> </div> <div class="media-body media-right" id=data-layer-talk> <a href=#data-layer-anchor> <h3 class="media-heading media-heading-re">Simplifying the data layer</h3> </a> <p> At Twitter, teams have starting adopting React because it’s enabled UI engineers to forget about time when writing rendering code. And we've started exploring similar simplifications in the data layer, embracing the UI’s role as part of a distributed system. First, we'll share how user experience choices are a primary influence on how we design the data layer, especially for teams developing new products with full-stack capabilities. Working with data from multiple backend services has powerful benefits, and shapes the problem space for UI engineering. Next, we'll look at how React and Flux approaches can help in our problem scenarios. Yet even after the advances in React’s component model, the data layer is still an important source of complexity as an app grows and changes over time. Finally, we'll look at new approaches we’ve been exploring, and how designs like decoupling 'recording facts' from 'computing views of those facts' have influenced UI engineering. These designs nudge teams towards simplicity when creating impactful user-facing improvements like real-time updates, optimistic commits, and graceful handling of network outages. </p> <a id=mobile-anchor></a> <div class=foot> <div class=name> <a class=hvr-grow href=https://medium.com/@patcito/reacteurope-interview-5-kevin-robinson-9d5f382ac13b target=_blank> <i class="fa fa-microphone"></i> </a> Kevin Robinson </div> <div class=links> <a href=https://twitter.com/krob target=_blank><i class="fa fa-twitter"></i></a> <a href=https://www.linkedin.com/pub/kevin-robinson/4/676/11a target=_blank><i class="fa fa-linkedin-square"></i></a> <a href=https://github.com/kevinrobinson target=_blank><i class="fa fa-github"></i></a> </div> </div> </div> </li> </div> <div class=media-container> <li class=media> <div class=media-left> <div class=media-left-re> <img class="img-circle img-circle-re img-responsive center-block" src=images/jed-watson.jpg> <div class=container-media-icons> <span class="fa fa-clock-o media-icons"></span> <span class=time-label>12:00</span> </div> </div> </div> <div class="media-body media-right" id=mobile-talk> <a href=#mobile-anchor> <h3 class="media-heading media-heading-re">Going Mobile with React</h3> </a> <p> React.js is changing the way developers think about mobile app development, especially with the recent announcement of React Native. However, in many ways hybrid (web + mobile) app development is here to stay for a large number of mobile apps. Everyone's heard "you can't build a native experience in a web view". We disagree. You just have to know the right tricks. And when you do, the web becomes an incredibly powerful platform for delivering amazing user experience using the technology you know. At Thinkmill in Sydney, over the course of developing several commercial apps, we've experienced the power of using ReactJS for mobile apps built on web technology, and developed a framework we call TouchstoneJS (which Tom Occhino called "the best looking and feeling implementation of this that I've seen" during the Q&A session at React Conf) to share this capability with developers around the world. In this talk I'll share what we've learned and how we've approached the unique challenges of mobile web apps - with tools that are useful to all developers building touch interfaces with React, as well as a walkthrough of our development process and framework. I'll also talk about what you can do with the web platform that you can't with native apps, and even React Native. </p> <a id=react-router-anchor></a> <div class=foot> <div class=name><i class="fa fa-microphone"></i>Jed Watson</div> <div class=links> <a href=https://twitter.com/JedWatson target=_blank><i class="fa fa-twitter"></i></a> <a href=http://thinkmill.com.au target=_blank><i class="fa fa-link"></i></a> <a href=https://github.com/JedWatson target=_blank><i class="fa fa-github"></i></a> </div> </div> </div> </li> </div> <div class=media-container> <li class=media> <div class=media-left> <div class=media-left-re> <img class="img-circle img-circle-re img-responsive center-block" src=images/michael-jackson.jpg alt="Michael Jackson"> <div class=container-media-icons> <span class="fa fa-clock-o media-icons"></span> <span class=time-label>14:00</span> </div> </div> </div> <div class="media-body media-right" id=react-router-talk> <a href=#react-router-anchor><h3 class="media-heading media-heading-re">React Router</h3></a> <p> Since May 2014 over 100 people have contributed code to React Router and many, many more have filed issues, given talks, and used the router in both server and client environments. It has been mine and Ryan's privilege to work with and learn from these wonderful people and to guide the direction of a library that we hope will help us all build amazing products and tools with React over the next few years. </p><p> This year we are introducing support for React Native and we are working closely with the Relay team to ensure the router meets the needs of React developers everywhere React runs. More importantly though, we are focused on bringing great experiences to consumers of applications built using React Router. In this talk, we will discuss how your users can benefit from the many tools the router provides including server-side rendering, real URLs on native devices, and much, much more. </p> <a id=graphQL-anchor></a> <div class=foot> <div class=name> <a class=hvr-grow href=https://medium.com/@patcito/reacteurope-interview-14-michael-jackson-a9d3af90774f target=_blank> <i class="fa fa-microphone"></i> </a> Michael Jackson</div> <div class=pro></div> <div class=links> <a href=https://twitter.com/mjackson target=_blank><i class="fa fa-twitter"></i></a> <a href="https://reactjs-training.com/" target=_blank><i class="fa fa-link"></i></a> <a href=https://github.com/mjackson target=_blank><i class="fa fa-github"></i></a> </div> </div> </div> </li> </div> <div class=media-container> <li class=media> <div class=media-left> <div class=media-left-re> <img class="img-circle img-circle-re img-responsive center-block" src=images/schrockn.jpg> <img class="img-circle img-circle-re img-circle-speaker2 img-responsive center-block" src=images/dlschafer.jpg> <div class=container-media-icons> <span class="fa fa-clock-o media-icons"></span> <span class=time-label>14:30</span> </div> </div> </div> <div class="media-body media-right" id=graphQL-talk> <a href=#graphQL-anchor> <h3 class="media-heading media-heading-re">Creating a GraphQL Server</h3> </a> <p> In this talk, we'll take a deeper dive into putting GraphQL to work. How can we build a GraphQL API to work with an existing REST API or server-side data model? What are best practices when building a GraphQL API, and how do they differ from traditional REST best practices? How does Facebook use GraphQL? Most importantly, what does a complete and coherent GraphQL API looks like, and how can we get started building one? </p> <a id=isomorphic-flux-anchor></a> <div class=foot> <div class=foot-speaker1> <div class=name> <a class=hvr-grow href=https://medium.com/@patcito/reacteurope-interview-6-nick-schrock-c71f99fe78e6 target=_blank> <i class="fa fa-microphone"></i> </a> Nick Schrock </div> <div class=links> <a href=https://twitter.com/schrockn target=_blank><i class="fa fa-twitter"></i></a> <a href=http://www.facebook.com/schrockn target=_blank><i class="fa fa-facebook"></i></a> <a href=https://github.com/schrockn target=_blank><i class="fa fa-github"></i></a> </div> </div> <div class=foot-speaker2> <div class=name> <a class=hvr-grow href=https://medium.com/@patcito/reacteurope-interview-7-dan-schafer-b93f09485a63 target=_blank> <i class="fa fa-microphone"></i> </a> Dan Schafer </div> <div class=links> <a href=https://twitter.com/dlschafer target=_blank><i class="fa fa-twitter"></i></a> <a href=https://www.facebook.com/dschafer target=_blank><i class="fa fa-facebook"></i></a> <a href=https://github.com/dschafer target=_blank><i class="fa fa-github"></i></a> </div> </div> </div> </div> </li> </div> <div class=media-container> <li class=media> <div class=media-left> <div class=media-left-re> <img class="img-circle img-circle-re img-responsive center-block" src=images/michael-ridgway.jpg> <div class=container-media-icons> <span class="fa fa-clock-o media-icons"></span> <span class=time-label>15:30</span> </div> </div> </div> <div class="media-body media-right" id=isomorphic-talk> <a href=#isomorphic-flux-anchor><h3 class="media-heading media-heading-re">Isomorphic Flux</h3></a> <p> Flux provides a good framework for building rich client applications, but did you know you can reuse the flux architecture for server rendering? In this talk, I'll walk you through an isomorphic Flux architecture to give you the holy grail of frontend development. With this architecture you'll be able to reuse all of your application code on the server and client without worrying about server-side concurrency issues that you may see with stock Flux. Once the concepts have been explained, I will introduce the open source libraries that we have open sourced and are powering many of Yahoo's high-traffic web applications. </p> <a id=submarines-anchor></a> <div class=foot> <div class=name> <a class=hvr-grow href=https://medium.com/@patcito/reacteurope-interview-4-michael-ridgway-f773ae92c212 target=_blank> <i class="fa fa-microphone"></i> </a> Michael Ridgway </div> <div class=links> <a href=https://twitter.com/TheRidgway target=_blank><i class="fa fa-twitter"></i></a> <a href=http://theridgway.com target=_blank><i class="fa fa-link"></i></a> <a href=https://github.com/mridgway target=_blank><i class="fa fa-github"></i></a> </div> </div> </div> </li> </div> <div class=media-container> <li class=media> <div class=media-left> <div class=media-left-re> <img class="img-circle img-circle-re img-responsive center-block" src=images/aria-buckles.jpg> <div class=container-media-icons> <span class="fa fa-clock-o media-icons"></span> <span class=time-label>16:00</span> </div> </div> </div> <div class="media-body media-right" id=submarines-talk> <a href=#submarines-anchor> <h3 class="media-heading media-heading-re">Building submarines that don't leak</h3></a> <p> React provides us with a lot of tools for building components, but isn't prescriptive about how we use those. Objects can have props, state, and instance fields. When is it best to use each? We've heard a lot about pure components, but how do we make pure components when we have to deal with the realities of a stateful world? How do we make more complex components whose props actually represent them? We'll cover how we've answered these questions at Khan Academy, including techniques and patterns to make dealing with large pure components simpler, as well as current open questions. </p> <a id=extensible-talk-anchor></a> <div class=foot> <div class=name> <a class=hvr-grow href=https://medium.com/@patcito/reacteurope-interview-8-aria-buckles-f51b6ab34d2b target=_blank> <i class="fa fa-microphone"></i> </a> Aria Buckles </div> <div class=links> <a href=https://twitter.com/ariabuckles target=_blank><i class="fa fa-twitter"></i></a> <a href=https://sourcegraph.com/ariabuckles target=_blank><i class="fa fa-link"></i></a> <a href=https://github.com/ariabuckles target=_blank><i class="fa fa-github"></i></a> </div> </div> </div> </li> </div> <div class=media-container> <li class=media> <div class=media-left> <div class=media-left-re> <img class="img-circle img-circle-re img-responsive center-block" src=images/evan-morikawa.jpg> <img class="img-circle img-circle-re img-circle-speaker2 img-responsive center-block" src=images/ben-gotow.jpg> <div class=container-media-icons> <span class="fa fa-clock-o media-icons"></span> <span class=time-label>17:00</span> </div> </div> </div> <div class="media-body media-right" id=extensible-talk> <a href=#extensible-talk-anchor> <h3 class="media-heading media-heading-re">How React & Flux Turn Applications Into Extensible Platforms</h3></a> <p> Chrome is great, but 3rd party extensions make it better. The iPhone is great, but apps make it better. You React-app may be great, but imagine if you could safely and robustly allow 3rd party extensions to enhance it. We'll talk about specific features of React & Flux, React CSS, programming design patterns, and custom libraries, which can turn a static application into a dynamic platform that an ecosystem of developers can build on top of. We've built a highly-extensible desktop email client with React & Flux on Atom Shell, and we'll also show concrete examples of where these tools enabled a 3rd party ecosystem of email plugins. Our goal is for you to take away how to use React to be more than just great application developers, but now great platform developers as well. </p> <div class=foot> <div class=foot-speaker1> <div class=name> <a class=hvr-grow href=https://medium.com/@patcito/reacteurope-interview-12-evan-morikawa-2d077dbdaa3 target=_blank> <i class="fa fa-microphone"></i> </a> Evan Morikawa </div> <div class=links> <a href=https://twitter.com/E0M target=_blank><i class="fa fa-twitter"></i></a> <a href=https://www.linkedin.com/in/evanmorikawa target=_blank><i class="fa fa-linkedin"></i></a> <a href=https://github.com/emorikawa target=_blank><i class="fa fa-github"></i></a> </div> </div> <div class=foot-speaker2> <div class=name> <a class=hvr-grow href=https://medium.com/@patcito/reacteurope-interview-13-ben-gotow-6fe44a5da751 target=_blank> <i class="fa fa-microphone"></i> </a> Ben Gotow </div> <div class=links> <a href=https://twitter.com/bengotow target=_blank><i class="fa fa-twitter"></i></a> <a href="http://foundry376.com/" target=_blank><i class="fa fa-linkedin"></i></a> <a href=https://github.com/bengotow target=_blank><i class="fa fa-github"></i></a> </div> </div> </div> </div> </li> </div> <div class=media-container> <li class=media> <div class=media-left> <div class=media-left-re> <img class="img-responsive img-circle center-block" src=images/reacteurope.png> <div class=container-media-icons> <span class="fa fa-clock-o media-icons"></span> <span class=time-label>17:30</span> </div> </div> </div> <div class="media-body media-right"> <h3 class="media-heading media-heading-re">Q&A</h3> <p> </p> <span id=schedule-table-anchor></span> </div> </li> </div> </ul> </div> </div> </div> </div> <div class=panel-heading> <table class="table table-bordered schedule-table"> <thead> <tr> <th></th> <th>Thu<span class=hidden-xs>rsday</span> 2nd July</th> <th>Fri<span class=hidden-xs>day</span> 3rd July</th> </tr> </thead> <tbody> <tr class=special> <td>8:30-10:00</td> <td>Registration and French Breakfast</td> <td>Check-in and French Breakfast</td> </tr> <tr> <td>10:00–10:30</td> <td> <div>Keynote</div> <div>Christopher Chedeau</div> </td> <td> <div><a type=button class=toggle-modal data-target=#workflow-talk>Improving Your Workflow With Code Transformation</a></div> <div>Sebastian McKenzie</div> </td> </tr> <tr> <td>10:30–11:00</td> <td> <div><a type=button class=toggle-modal data-target=#inline-styles-talk>Inline Styles: themes, media queries, contexts, and when it's best to use CSS</a> </div> <div>Michael Chan</div> </td> <td> <div><a type=button class=toggle-modal data-target=#animation-talk>The State of Animation in React</a></div> <div>Cheng Lou</div> </td> </tr> <tr class=special> <td>11:00–11:30</td> <td>Coffee break</td> <td>Coffee break</td> </tr> <tr> <td>11:30–12:00</td> <td> <div><a type=button class=toggle-modal data-target=#flux-talk>Flux over the Wire</a></div> <div>Elie Rotenberg</div> </td> <td> <div><a type=button class=toggle-modal data-target=#data-layer-talk>Simplifying the data layer</a></div> <div>Kevin Robinson</div> </td> </tr> <tr> <td>12:00–12:30</td> <td> <div><a type=button class=toggle-modal data-target=#react-native-talk>React Native: Building Fluid User Experiences</a></div> <div>Spencer Ahrens</div> </td> <td> <div><a type=button class=toggle-modal data-target=#mobile-talk>Going Mobile with React</a></div> <div>Jed Watson</div> </td> </tr> <tr class=special> <td>12:30–14:00</td> <td>French Buffet</td> <td>French Buffet</td> </tr> <tr> <td>14:00–14:30</td> <td> <div><a type=button class=toggle-modal data-target=#exploring-graphQL-talk>Exploring GraphQL</a></div> <div>Lee Byron</div> </td> <td> <div><a type=button class=toggle-modal data-target=#react-router-talk>React Router</a></div> <div>Michael Jackson</div> </td> </tr> <tr> <td>14:30-15:00</td> <td> <div><a type=button class=toggle-modal data-target=#website-talk>Don't Rewrite, React!</a></div> <div>Ryan Florence</div> </td> <td> <div><a type=button class=toggle-modal data-target=#graphQL-talk>Creating a GraphQL Server</a></div> <div>Nick Schrock & Dan Schafer</div> </td> </tr> <tr class=special> <td>15:00–15:30</td> <td>Coffee break</td> <td>Coffee break</td> </tr> <tr> <td>15:30–16:00</td> <td> <div><a type=button class=toggle-modal data-target=#reloading-talk>Live React: Hot Reloading with Time Travel</a></div> <div>Dan Abramov</div> </td> <td> <div><a type=button class=toggle-modal data-target=#isomorphic-talk>Isomorphic Flux</a></div> <div>Michael Ridgway</div> </td> </tr> <tr> <td>16:00–16:30</td> <td> <div><a type=button class=toggle-modal data-target=#relay-talk>Relay: An Application Framework For React</a></div> <div>Joseph Savona</div> </td> <td> <div><a type=button class=toggle-modal data-target=#submarines-talk>Building submarines that don't leak</a></div> <div>Aria Buckles</div> </td> </tr> <tr class=special> <td>16:30–17:00</td> <td>Coffee break</td> <td>Coffee break</td> </tr> <tr> <td>17:00–17:30</td> <td> <div><a type=button class=toggle-modal data-target=#back-text-talk>Back to Text UI</a></div> <div>Mikhail Davydov</div> </td> <td> <div><a type=button class=toggle-modal data-target=#extensible-talk>How React & Flux Turn Applications Into Extensible Platforms</a></div> <div>Evan Morikawa & Ben Gotow</div> </td> </tr> <tr> <td>17:30–18:00</td> <td> <div><a type=button class=toggle-modal data-target=#dom>DOM as a Second-class Citizen</a></div> <div>Sebastian Markbåge</div> </td> <td> <div>Q&A</div> <div></div> </td> </tr> <tr> <td>18:00–19:00</td> <td> <div><a href=https://medium.com/@patcito/reacteurope-ligthning-sessions-bc8461b93d4f target=_blank>Lightning talks</a></div> </td> <td class=special> Drink up </td> </tr> <tr> <td class=special>19:00–23:00</td> <td class=special>Special Dinner</td> <td class=special></td> </tr> </tbody> </table> </div> </div> </section> <section id=tickets> <div class="container text-center"> <h2 class="thin title tickets-title">Tickets</h2> <h4 class=subtitle> <div class=row> <a class="btn eventlama-btn hidden-xs" href=# role=button data-toggle=modal data-target=#ticketModal> Get Notified when 2016 edition tickets go on sales</a> <a class="btn eventlama-btn visible-xs hidden-md" href=# role=button data-toggle=modal data-target=#ticketModal> Get 2016 tickets notifications</a> </div> </h4></div></section> <section id=getting-there> <div class=row> <h2 class="thin title">Getting There</h2> <a href="https://www.google.com/maps/place/Espace+Charenton/@48.832651,2.396575,17z/data=!3m1!4b1!4m2!3m1!1s0x47e67242e2b4a6a5:0xff70319942e6fc13" target=_blank> <img src=images/map.png width=100%> </a> <div id=map-dialog> <img class="img-responsive venue-logo" src=images/logo.jpg alt="Espace Charenton"> <p id=location-address> <a href="https://www.google.com/maps/place/Espace+Charenton/@48.832651,2.396575,17z/data=!3m1!4b1!4m2!3m1!1s0x47e67242e2b4a6a5:0xff70319942e6fc13" target=_blank> <strong>Espace Charenton</strong> <br> 327, rue de Charenton <br> 75012 Paris </a> <br> </p> <a type=button class="btn btn-primary btn-lg" data-toggle=modal data-target=#myModal>Hotels</a> </div> </div> </section> <section id=sponsors> <div class=container> <h2 class="thin title">Sponsors</h2> <h3>Diamond</h3> <div class="row sponsors-flex-container"> <div class="flip-container flex-item-sponsor-diamond" ontouchstart="this.classList.toggle('hover');"> <div class=flipper> <div class=front> <img class=sponsor-logo-diamond src=images/rangle.png alt=Rangle.io> </div> <div class=back> <p class=diamond-blurb><a href="http://rangle.io/" target=_blank> Rangle.io is North America's leading next-generation full-stack JavaScript design and development firm. Dedicated to well-crafted responsive web and mobile applications, we only work with modern JavaScript, HTML5, and CSS. Our specialities include Angular, React, Node, Ionic, Meteor, Backbone and other modern JavaScript technologies. As strong functional programming advocates, we lean towards functional reactive programming (FRP) for more complex applications. We are a pioneer in Lean UX and our integrated Agile design and development methodologies allow us to start delivering value quickly and continuously, enabling our clients to quickly test and validate their features and business model on an ongoing basis. With over two dozen modern JavaScript projects delivered in the last two years, we are the partner of choice for companies starting a new project or migrating to modern HTML5 web and mobile applications. </a></p> </div> </div> </div> </div> <div class=clearfix></div> <h3>Platinum</h3> <div class="row sponsors-flex-container"> <div class="flip-container flex-item-sponsor-platinium" ontouchstart="this.classList.toggle('hover');"> <div class=flipper> <div class=front> <img class=sponsor-logo-platinium src=images/automattic.png alt=Automattic> </div> <div class=back> <p class=platinium-blurb><a href="http://automattic.com/" target=_blank> Automattic is a distributed company, democratizing publishing and development. We are the people behind WordPress.com, which serves more than 15.8 billion pages a month, as well as a host of other popular services, such as Akismet, Jetpack, and VaultPress. We are strong believers in Open Source, and the vast majority of our work is available under licenses like the GPL. Our team members hail from nearly every continent and 36 countries around the world. We are hiring! Learn more at http://automattic.com. </a></p> </div> </div> </div> </div> <div class=clearfix></div> <h3>Gold</h3> <div class="row sponsors-flex-container"> <div class="flip-container flex-item-sponsor-gold" ontouchstart="this.classList.toggle('hover');"> <div class=flipper> <div class=front> <img class=sponsor-logo-gold src=images/red-badger.png alt="Red Badger"> </div> <div class=back> <p class=gold-blurb><a href="http://red-badger.com/" target=_blank>Red Badger is a creative software workshop in East London. We love to craft. We love to innovate. And more than anything, we love to create beautiful, compelling experiences built around robust technologies. We work for clients such as Fortnum & Mason, BSkyB, Tesco and The BBC. We love React.js and run the brilliant React meetup in London.</a></p> </div> </div> </div> </div> <div class="row sponsors-flex-container"> <div class="flip-container flex-item-sponsor-gold" id=flex-item-zalando ontouchstart="this.classList.toggle('hover');"> <div class=flipper> <div class=front> <img class=sponsor-logo-gold src=images/zalando.png alt=Zalando> </div> <div class=back> <p class=gold-blurb> <a href="https://tech.zalando.com/" target=_blank> https://tech.zalando.com/ </a> </p> </div> </div> </div> </div> <div class=clearfix></div> <h3>Silver</h3> <div class="row sponsors-flex-container"> <div class=flex-item-sponsor-silver> <a target=blank href="https://www.new-bamboo.co.uk/"> <div class=sponsor-silver-wrapper-img> <img class=sponsor-logo-silver src=images/new-bamboo.png alt="New Bamboo"> </div> </a> </div> </div> <div class=clearfix></div> <h3>Bronze</h3> <div class="row sponsors-flex-container"> <div class=flex-item-sponsor-bronze> <a target=blank href="http://reaktor.com/"> <div class=sponsor-bronze-wrapper-img> <img class=sponsor-logo-bronze src=images/reaktor_logo.gif alt=Reaktor> </div> </a> </div> <div class=flex-item-sponsor-bronze> <a target=blank href="http://www.ekino.com/"> <div class=sponsor-bronze-wrapper-img> <img class=sponsor-logo-bronze src=images/ekino.png alt=Ekino> </div> </a> </div> <div class=flex-item-sponsor-bronze> <a target=blank href=http://www.strikingly.com> <div class=sponsor-bronze-wrapper-img> <img class=sponsor-logo-bronze src=images/strikingly.png alt=Strikingly> </div> </a> </div> </div> <div class=clearfix></div> <h3>Startup</h3> <div class="row sponsors-flex-container"> <div class="row sponsors-flex-container"> <div class=flex-item-sponsor-startup> <a target=blank href="http://www.lodgify.com/"> <div class=sponsor-startup-wrapper-img id=startup-wrapper-lodgify> <img class=sponsor-logo-startup src=images/lodgify.png alt=Lodgify> </div> </a> </div> </div> <div class="row sponsors-flex-container"> <div class=flex-item-sponsor-startup> <a target=blank href="http://www.maltem.com/"> <div class=sponsor-startup-wrapper-img id=startup-wrapper-maltem> <img class=sponsor-logo-startup id=sponsor-logo-maltem src=images/maltem.png alt=Lodgify> </div> </a> </div> </div> <div class="row sponsors-flex-container"> <div class=flex-item-sponsor-startup> <a target=blank href="https://www.anaplan.com/"> <div class=sponsor-startup-wrapper-img id=startup-wrapper-anaplan> <img id=sponsor-logo-anaplan src=images/Anaplan.jpg alt=Lodgify> </div> </a> </div> </div> </div> <div class=clearfix></div> <h2 class="thin title">Supporters</h2> <div class="row supporters-flex-container"> <div class=flex-item-supporters> <a target=blank href="https://www.facebook.com/careers/"> <img class=supporter-logo id=fb-logo src=images/supporters/FB-f-Logo__blue_144.png alt=Facebook> </a> </div> <div class="flex-item-supporters supporter"> <a target=blank href="https://eventlama.com/"> <img class=supporter-logo src=images/eventlama.png alt=EventLama> </a> </div> <div class="flex-item-supporters supporter hidden-xs"> <a target=blank href=https://www.oxiane.com> <img class=supporter-logo src=images/oxiane.png alt=Oxiane> </a> </div> <div class="flex-item-supporters supporter"> <a target=blank href="http://productivemobile.com/"> <img class=supporter-logo src=images/productivemobile.png alt="Productive Mobile"> </a> </div> <div class="flex-item-supporters supporter"> <a target=blank href="https://www.mozilla.org/en-US/"> <img class=supporter-logo src=images/mozilla_wordmark.png alt=Mozilla> </a> </div> <div class="flex-item-supporters supporter"> <a target=blank href=http://thinkmill.com.au> <img class=supporter-logo src=images/thinkmill.png alt=Thinkmill> </a> </div> <div class="flex-item-supporters yahoo-supporter"> <a target=blank href="https://www.yahoo.com/"> <img class=supporter-logo id=yahoo-logo src=images/Yahoo_Logo.png alt=Yahoo> </a> </div> <div class="flex-item-supporters supporter"> <a target=blank href="http://www.leanovia.com/"> <img class=supporter-logo src=images/leanovia.png alt=Leanovia> </a> </div> <div class="flex-item-supporters supporter visible-xs"> <a target=blank href=https://www.oxiane.com> <img class=supporter-logo src=images/oxiane.png alt=Oxiane> </a> </div> </div> <div class=clearfix></div> <p class=hidden>Want to get involved and help support ReactEurope? We'd love to hear from you.</p> <div class="text-center wrapper-btn hidden"> <a class="btn eventlama-btn" href=docs/sponsorship-prospectus-react-europe.pdf role=button>Download our sponsors prospectus</a> </div> </div> </section> <section id=job-board> <div class=container> <h2 class="thin title">Job Board</h2> <div> <div class=job-board-wrapper-img> <a target=blank href="http://rangle.io/"> <img class=img-sponsor-job-board src=images/rangle.png alt=Rangle target=_blank> </a> </div> <ul> <li> Rangle.io is North America's leading next-generation full-stack JavaScript design and development firm. Dedicated to well-crafted responsive web and mobile applications, we only work with modern JavaScript, HTML5, and CSS.<br> Our specialities include Angular, React, Node, Ionic, Meteor, Backbone and other modern JavaScript technologies. As strong functional programming advocates, we lean towards functional reactive programming (FRP) for more complex applications.<br> We are a pioneer in Lean UX and our integrated Agile design and development methodologies allow us to start delivering value quickly and continuously, enabling our clients to quickly test and validate their features and business model on an ongoing basis.<br> With over two dozen modern JavaScript projects delivered in the last two years, we are the partner of choice for companies starting a new project or migrating to modern HTML5 web and mobile applications. </li> </ul> </div> <div class=container-job-board-brand> <div class=job-board-wrapper-img> <a target=blank href=http://automattic.com> <img class=img-sponsor-job-board src=images/automattic.png alt=Automattic target=_blank> </a> </div> <ul> <li> Automattic is a distributed company, democratizing publishing and development.<br> We are the people behind WordPress.com, which serves more than 15.8 billion pages a month, as well as a host of other popular services, such as Akismet, Jetpack, and VaultPress. We are strong believers in Open Source, and the vast majority of our work is available under licenses like the GPL.<br> Our team members hail from nearly every continent and 36 countries around the world. We are hiring!<br> Learn more at http://automattic.com.</li> <li><a href="http://automattic.com/work-with-us/" class=toggle-modall data-toggle=modall data-target=#jobModalLabell target=_blank>WORK WITH US</a></li> </ul> </div> <div class=container-job-board-brand> <div class=job-board-wrapper-img> <a target=blank href="http://red-badger.com/"> <img class=img-sponsor-job-board src=images/red-badger.png alt="Red Badger" target=_blank> </a> </div> <ul> <li> Red Badger is a creative software workshop in East London. We love to craft. We love to innovate. And more than anything, we love to create beautiful, compelling experiences built around robust technologies.<br> We work for clients such as Fortnum & Mason, BSkyB, Tesco and The BBC.<br> We love React.js and run the brilliant React meetup in London. </li> </ul> </div> <div class=container-job-board-brand> <div class=job-board-wrapper-img> <a target=blank href="https://tech.zalando.com/"> <img class=img-sponsor-job-board src=images/zalando.png alt=Zalando target=_blank> </a> </div> <ul> <li> Zalando is Europe’s leading online fashion platform for women, men and children. A publicly traded company as of fall 2014, Zalando has more than 15 million customers in 15 countries. Our technology offices are located in Berlin (HQ), Dortmund, Mönchengladbach and Erfurt, Germany; Dublin, Ireland; and Helsinki, Finland.<br> Zalando's tech department has built most of our platform in-house, using open source and cutting-edge technologies such as React, Scala, Python, Cassandra, Clojure, AWS, and Docker. We work in small, agile, autonomous teams and build our systems around five key principles: API First, REST, SaaS, cloud, and microservices.<br> What does it take to become “a Zalando”? Above all, it requires passion: to experiment, learn, fail, and repeat the process, so that we get stronger and better every day. Zalando Tech includes men and women from more than 50 different nations and representing a seemingly endless number of interests, hobbies, programming-language preferences, personality types and other characteristics. What unites us is the energy and enthusiasm we share in tackling our common purpose: to deliver award-winning, best-in-class shopping experiences to our customers. </li> <li><a href="https://tech.zalando.com/jobs/tech/" target=_blank>CAREERS</a><br> <a href="https://tech.zalando.com/jobs/65722/?gh_jid=65722" target=_blank>Software Engineer, Frontend</a> (Junior/Senior)<br> <a href="https://tech.zalando.com/jobs/65924/?gh_jid=65924" target=_blank>Software Engineer, Web</a> (Junior/Senior)<br> <a href="https://tech.zalando.com/jobs/65983/?gh_jid=65983" target=_blank>Software Engineer, Backend</a> (Junior/Senior)<br> </li> </ul> </div> <div class=container-job-board-brand> <div class=job-board-wrapper-img> <a target=blank href="https://www.new-bamboo.co.uk/"> <img class=img-sponsor-job-board src=images/new-bamboo.png alt="New Bamboo" target=_blank> </a> </div> <ul> <li> We are an agile digital agency based in the heart of London. We work with pioneering businesses to help them refine, understand and realise their concepts and ideas. Our toolbox includes Ruby on Rails and now React among other web technologies. We work with organisations like Amnesty International, RedBull and Vodafone.<br> In addition to our client projects, we dedicate 20% of our time to what we call global impact projects. In partnership with non-profits and social enterprises we donate our expertise to projects which have a positive global impact.<br> We are currently hiring developers with React experience to join our growing team. </li> </ul> </div> <div class=container-job-board-brand> <div class=job-board-wrapper-img> <a target=blank href="http://reaktor.com/"> <img class=img-sponsor-job-board src=images/reaktor_logo.gif alt=Reaktor target=_blank> </a> </div> <ul> <li> Reaktor is a creative technology company. We construct exceptionally well-functioning services.<br> To achieve the finest quality, we keep design and production tightly together. The digital services Reaktor brings to life are not only extraordinarily beautiful but also a pleasure to use. And they are equipped with all the right features.<br> Reaktor’s team of 300 professionals consists of service designers, interaction designers, art directors, software architects, developers and coaches. We have everything required to deliver full end-to-end solutions.<br> The one thing our customers value the most is that we get things done. We take pride in our speed, accuracy and quality. With Reaktor, you’ll always know where you're standing and where things are going. </li> </ul> </div> <div class=container-job-board-brand> <div class=job-board-wrapper-img> <a target=blank href="http://ekino.com/"> <img class=img-sponsor-job-board src=images/ekino.png alt=Ekino target=_blank> </a> </div> <ul> <li> From 2008, Ekino is a spin-off of FullSIX Group specialized in digital transformation.<br> With over than 200 digital experts, ekino designs and builds digital services.<br> Ekino is based on 4 fundamental principles: Innovation prototyping for product vision achievement, digital product design for end-user adoption, digital IS building for speed deployment and data-driven management for cost control.<br> Ekino accompanies worldwide leading companies and french startups as Renault, Samsung, Chaumet, Coorpacademy, Musiwork, etc.<br> Ekino has one of the best french frontend team with specific skills on AngularJS, HTML5/CSS3, ReactJS, iOS, Android, Node Webkit, Cordova, and other stuff. We search new frontend genius with team spirit, so join us! </li> </ul> </div> <div class=container-job-board-brand> <div class=job-board-wrapper-img> <a target=blank href=http://www.strikingly.com> <img class=img-sponsor-job-board src=images/strikingly.png alt=Strikingly target=_blank> </a> </div> <ul> <li>Strikingly is a modern, mobile-optimized website builder that's extremely easy to use. We focus on beautiful one-page sites and extend it with blogs, forms, and e-commerce. Our mission is to let anyone turn their creative and business ideas into a reality online.<br> We’ve got a deep front-end stack to handle all of this (including React, of course), and we’re obsessed with user experience. If you’re a front-end developer looking for a challenge in a growing startup, come talk to us! http://www.strikingly.com/s/careers<br> We're currently based in Shanghai, but we have deep Silicon Valley roots. We're backed by Y Combinator (W13), SV Angel, Funders Club, Innovation Works, Infinity Ventures, Index Ventures, Kevin Hale, and many others. Make something people want. Come join us.</li> <li><a href=http://www.strikingly.com/s/careers target=_blank>CAREERS</a></li> </ul> </div> <div class=container-job-board-brand> <div class=job-board-wrapper-img> <a target=blank href="http://www.lodgify.com/"> <img class=img-sponsor-job-board src=images/lodgify.png alt=Lodgify target=_blank> </a> </div> <ul> <li>Lodgify is a travel tech startup building innovative software-as-a-service tools for lodging businesses such as vacation rentals and small hotels. We enable lodging operators to easily setup their own website with a “Book now” button and manage their reservations.<br> We are an international team that is passionate about building an unprecedented UX fully based on ReactJS. We are now looking for talented frontend developers in Europe to join our adventure.<br> We offer a competitive salary, stock options, lunch vouchers, private health insurance and flexible working hours. We are based in a bright rooftop office located in sunny Barcelona, Spain.<br> We have recently received €600k funding from notable travel tech investors and are an alumni of Seedcamp London, Europe’s leading accelerator program.<br> If you have a strong desire to innovate, learn about new technologies and have a real impact, then contact us via our careers page: http://www.lodgify.com/careers</li> <li><a href=http://www.lodgify.com/careers target=_blank>CAREERS</a></li> </ul> </div> <div class=container-job-board-brand> <div class=job-board-wrapper-img> <a target=blank> <img class=img-sponsor-job-board src=images/maltem.png alt=Maltem target=_blank> </a> </div> <ul> Maltem Consulting Group is an international group composed with four specialized consultancy firms: <li>Maltem Consulting : specialized in organization and information system management in financial, banking, insurance, energy, telecoms and media domains.</li> <li>Openbridge: consulting, design and implementation of digital, open sources and mobile solutions. Digital is changing everything. That’s why Openbridge helps businesses re-define how to serve connected customers and how to operate as connected enterprises. We offer complete, digital, integrated business and technology services.</li> <li>Bios : consulting, design and implementation of data management solutions. We bring responsiveness / significant closeness and above all the ability to deploy BI solutions related to our recommendations.</li> <li>Alaloop : differs from its unique expertise on the market to provide to its customers a 360° vision of their IT performances, using follow-up dashboards of business lines, technical, sensitive applications and IT infrastructure performances.</li> </ul> </div> <div class=container-job-board-brand> <div class=job-board-wrapper-img> <a target=blank href="http://productivemobile.com/"> <img class=img-sponsor-job-board src=images/productivemobile.png alt="Productive Mobile" target=_blank> </a> </div> <ul> <li> In few words what we are doing: we are creating a platform which helps enterprise companies to create mobile apps using existing web sites/apps. In two: mobilizing enterprise. </li> </ul> </div> <div class=container-job-board-brand> <div class=job-board-wrapper-img> <a target=blank href="http://www.leanovia.com/"> <img class=img-sponsor-job-board src=images/leanovia.png alt=leanovia target=_blank> </a> </div> <ul> <li> leanovia, a "pure player" in IT Performance Optimization.<br> Based in Paris and Casablanca, our mission is to improve the performance of our clients information systems.<br> Our value proposition covers the design of high performance architectures and the diagnosis of performance issues, using state-of-the-art monitoring and load testing tools. </li> </ul> </div> <div class=container-job-board-brand> <div class=job-board-wrapper-img> <a target=blank href="http://www.eventlama.com/"> <img class=img-sponsor-job-board src=images/eventlama.png alt=EventLama target=_blank> </a> </div> <ul> <li> Eventlama aims to make organizing your developer events a breeze. Organizing an event can quickly turn into an overwhelming amount of work that requires the use of various apps from selling tickets, to managing the call of paper, speakers, mobile ticketing, discounts, orders, sponsors and social networks. So much so that it's easy to miss an opportunity or forget to answer a sponsor or speaker. Eventlama takes care of all this with a focus on user experience, collaboration, live feedback and stats to make sure you never miss a thing. With Eventlama, you can always get a quick overview of what's going on and focus on making your dev event awesome. </li> </ul> </div> </div> </section> <section id=organizers> <div class=container> <h2 class="thin title">Organizers</h2> <div class="col-lg-3 col-xs-6 organizer text-center"> <a href=https://twitter.com/patcito target=_blank> <img class=img-circle-org src=images/pat.jpeg alt="React Organizer"></a> <h4><a href=https://twitter.com/patcito target=_blank>Patrick Aljord</a></h4> <span>(organizer)</span> </div> <div class="col-lg-3 col-xs-6 organizer text-center"> <a href=https://twitter.com/katy_gca target=_blank> <img class=img-circle-org src=images/katy.jpg alt="React Organizer"></a> <h4><a href=https://twitter.com/katy_gca target=_blank>Katiuska Gamero</a></h4> <span>(co-organizer)</span> </div> <div class="col-lg-3 col-xs-6 organizer text-center"> <a href=https://twitter.com/Vjeux target=_blank> <img class=img-circle-org src=images/christopher-chedeau.jpg alt="React Organizer"></a> <h4><a href=https://twitter.com/Vjeux target=_blank>Christopher Chedeau</a></h4> <span>(collaborator)</span> </div> <div class="col-lg-3 col-xs-6 organizer text-center"> <a href=https://twitter.com/cramonn target=_blank> <img class=img-circle-org src=images/cramon.jpeg alt="React Organizer"></a> <h4><a href=https://twitter.com/cramonn target=_blank>Chris Ramón</a></h4> <span>(collaborator)</span> </div> </div> </section> <footer> <div class=container> <div class=row> <div class=code-re> <a href="http://confcodeofconduct.com/"><span>Code of Conduct</span></a> </div> <div class=footer-social> <a href="https://www.facebook.com/ReactEurope?fref=ts" target=_blank><span class="fa fa-facebook-square fa-2x"></span></a> <a href=https://twitter.com/ReactEurope target=_blank><span class="fa fa-twitter-square fa-2x"></span></a> <a href=https://plus.google.com/108919477429469748686 rel=publisher target=_blank><span class="fa fa-google-plus-square fa-2x" target=_blank></span></a> </div> </div> </div> </footer> <div> <div class="modal fade" id=ticketModal tabindex=-1 role=dialog aria-labelledby=ticketModalLabel aria-hidden=true> <div class=modal-dialog> <div class="modal-content ticket-modal"> <div class=modal-header> <button type=button class=close data-dismiss=modal aria-label=Close><span aria-hidden=true>×</span></button> <h4 class=modal-title id=ticketModalLabel>Get tickets</h4> </div> <div class=modal-body> <iframe src="https://docs.google.com/forms/d/186_VUzeJ63IJZFcXyiThB5WkAj6UymxGo-1bzxTDITs/viewform?embedded=true" class=google-form frameborder=0 marginheight=0 marginwidth=0>Loading...</iframe> </div> <div class=modal-footer> <button type=button class="btn btn-default" data-dismiss=modal>Close</button> </div> </div> </div> </div> </div> <div> <div class="modal fade" id=myModal tabindex=-1 role=dialog aria-labelledby=myModalLabel aria-hidden=true> <div class=modal-dialog> <div class=modal-content> <div class=modal-header> <button type=button class=close data-dismiss=modal aria-label=Close><span aria-hidden=true>×</span></button> <h4 class=modal-title id=myModalLabel>Nearby accommodation:</h4> </div> <div class=modal-body> <strong> Closest to the venue:</strong> <ul> <li> <a data-toggle=collapse data-parent=#hotels-accordion href=#collapseHotelOne1 aria-expanded=true aria-controls=collapseOne1>Adagio Access Paris Porte De Charenton</a> </li> <div id=collapseHotelOne1 class="panel-collapse collapse" role=tabpanel aria-labelledby=hotelOne1> <a href=http://www.adagio-city.com/fr/hotel-8365-aparthotel-adagio-access-paris-porte-de-charenton/index.shtml target=_blank>203 Rue De Paris<br> 94220 Charenton-le-Pont</a><br> Tél : 33(0) 1 58 73 64 00 </div> <li> <a data-toggle=collapse data-parent=#hotels-accordion href=#collapseHotelOne2 aria-expanded=false aria-controls=collapseOne2> Novotel Paris Charenton</a> </li> <div id=collapseHotelOne2 class="panel-collapse collapse" role=tabpanel aria-labelledby=hotelOne2> <a href=http://www.novotel.com/fr/hotel-1549-novotel-paris-charenton/index.shtml target=_blank>3-5 place des Marseillais<br> 94227 Charenton-Le-Pont</a><br> Tél : 33(0) 1 46 76 60 60 </div> </ul> <strong>Small and cosy hotels: </strong> <ul> <li> <a data-toggle=collapse data-parent=#hotels-accordion href=#collapseHotelTwo1 aria-expanded=true aria-controls=collapseTwo1>Grand Hotel Doré</a> </li> <div id=collapseHotelTwo1 class="panel-collapse collapse" role=tabpanel aria-labelledby=hotelTwo1> <a href="http://www.grand-hotel-dore.com/fr/?r=3710516&gclid=Cj0KEQiAzvmkBRCm3ZbV-4-hwrYBEiQAgLOw6x1sjuY109voE-5qJz1ohoQW9ASHearJpaCeOmFh7PAaAke68P8HAQ" target=_blank> 201 Avenue Daumesnil<br> 75012 Paris</a><br> Tél : 33(0) 1 43 43 66 89 </div> <li> <a data-toggle=collapse data-parent=#hotels-accordion href=#collapseHotelTwo2 aria-expanded=true aria-controls=collapseTwo2>Le Quartier Bercy-Square</a> </li> <div id=collapseHotelTwo2 class="panel-collapse collapse" role=tabpanel aria-labelledby=hotelTwo2> <a href="http://www.lequartierhotelbs.com/" target=_blank>33, Boulevard de Reuilly<br> 75012 Paris</a><br> Tél : 33(0) 1 44 87 09 09<br><br> </div> </ul> <strong>More:</strong> <ul> <li> <a data-toggle=collapse data-parent=#hotels-accordion href=#collapseHotelThree1 aria-expanded=true aria-controls=collapseThree1>Pullman Paris Bercy</a> </li> <div id=collapseHotelThree1 class="panel-collapse collapse" role=tabpanel aria-labelledby=hotelThree1> <a href=http://www.pullmanhotels.com/fr/hotel-2192-pullman-paris-centre-bercy/index.shtml target=_blank>1 rue de Libourne<br> 75012 Paris</a><br> Tél : 33(0) 1 44 67 34 01 </div> <li> <a data-toggle=collapse data-parent=#hotels-accordion href=#collapseHotelThree2 aria-expanded=true aria-controls=collapseThree2>Mercure Paris Gare de Lyon</a> </li> <div id=collapseHotelThree2 class="panel-collapse collapse" role=tabpanel aria-labelledby=hotelThree2> <a href=http://www.mercure.com/gb/hotel-2217-mercure-paris-gare-de-lyon-hotel/index.shtml target=_blank>2, PLace Louis Armand<br> 75012 Paris</a><br> Tél : 33(0) 1 43 47 41 94 </div> <li> <a data-toggle=collapse data-parent=#hotels-accordion href=#collapseHotelThree3 aria-expanded=true aria-controls=collapseThree3>Ibis Styles Paris Bercy</a> </li> <div id=collapseHotelThree3 class="panel-collapse collapse" role=tabpanel aria-labelledby=hotelThree3> <a href=http://www.ibis.com/fr/hotel-0941-ibis-styles-paris-bercy/index.shtml target=_blank> 77, rue de Bercy<br> 75012 Paris</a><br> Tél : 33(0) 1 53 46 50 50 </div> <li> <a data-toggle=collapse data-parent=#hotels-accordion href=#collapseHotelThree4 aria-expanded=true aria-controls=collapseThree4>Kyriad Paris Bercy Village</a> </li> <div id=collapseHotelThree4 class="panel-collapse collapse" role=tabpanel aria-labelledby=hotelThree4> <a href="http://www.bercykyriad.fr/" target=_blank>17 rue Baron le Roy<br> 75012 Paris</a><br> Tél : 33(0) 1 44 67 75 75 </div> <li> <a data-toggle=collapse data-parent=#hotels-accordion href=#collapseHotelThree5 aria-expanded=true aria-controls=collapseThree5>Ibis Daumesnil Porte Dorée</a> </li> <div id=collapseHotelThree5 class="panel-collapse collapse" role=tabpanel aria-labelledby=hotelThree5> <a href="http://ibis-daumesnil-paris.h-rez.com/index.htm?lbl=ggl-en&gclid=Cj0KEQiAzvmkBRCm3ZbV-4-hwrYBEiQAgLOw6-abfsJh4e375CvMB6xm2LOq0-fVkG9SKVv1dvFVjCYaAoKO8P8HAQ" target=_blank>111 boulevard Poniatowski<br> 75012 Paris</a><br> Tél : 33(0) 1 43 43 30 38 </div> <li><a href="https://www.airbnb.com/s/Avenue-de-la-Porte-de-Charenton--Paris--France?source=bb" target=_blank>Airbnb</a></li> </ul> </div> <div class=modal-footer> <button type=button class="btn btn-default" data-dismiss=modal>Close</button> </div> </div> </div> </div> </div> <div> <div class="modal fade" id=talkModal tabindex=-1 role=dialog aria-labelledby=talkModalLabel aria-hidden=true> <div class=modal-dialog> <div class="modal-content talk-modal"> <div class=modal-header> <button type=button class=close data-dismiss=modal aria-label=Close><span aria-hidden=true>×</span></button> <h4 class=modal-title id=talkModalLabel>Talk details</h4> </div> <div class="modal-body clearfix" id=talkModalBody> </div> <div class=modal-footer> <button type=button class="btn btn-default" data-dismiss=modal>Close</button> </div> </div> </div> </div> </div> <div> <div class="modal fade" id=jobModalLabel tabindex=-1 role=dialog aria-labelledby=jobModalLabel aria-hidden=true> <div class=modal-dialog> <div class="modal-content job-modal"> <div class=modal-header> <button type=button class=close data-dismiss=modal aria-label=Close><span aria-hidden=true>×</span></button> <h1 class=modal-title id=jobModalLabel>Rangle.io</h1> </div> <div class="modal-body clearfix" id=jobModalBody> <h4 class=modal-title>CAREERS</h4> <h3 class="media-heading media-heading-re">Senior Agile UX Designer</h3> </div> <div class=modal-footer> <button type=button class="btn btn-default" data-dismiss=modal>Close</button> </div> </div> </div> </div> </div> <script src=scripts/vendor.js></script> <script src=scripts/plugins.js></script> <script src=scripts/main.js></script> </body> </html>