seamless-immutable-cursor
Version:
Cursor Library add-on for seamless-immutable
191 lines (169 loc) • 6.68 kB
HTML
<html>
<!--
MIT License
Copyright (c) 2016 Martin Snyder
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>seamless-immutable-cursor - Martin Snyder</title>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/black.css">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h3>Seamless-immutable-cursor: Bridging Immutability and React</h3>
<p>
<small><a href="http://martinsnyder.net">Martin Snyder</a> / <a href="https://twitter.com/MartinSnyder">@MartinSnyder</a> / <a href="http://www.wingspan.com">Wingspan Technology, Inc.</a></small>
</p>
<aside class="notes">
<ul>
<li>Wingspan makes document management applications for regulated industries</li>
</ul>
</aside>
</section>
<section>
<h3>Immutability in JavaScript - Options</h3>
<p>
<ul>
<li><a href="https://facebook.github.io/immutable-js">Immutable.js</a> (15k stars)</li>
<li><a href="https://github.com/rtfeldman/seamless-immutable">Seamless Immutable</a> (2.5k stars)</li>
<li><a href="https://github.com/substack/deep-freeze">Deep Freeze</a> (0.5k stars)</li>
</ul>
</p>
<aside class="notes">
</aside>
</section>
<section>
<h3>Immutable.js</h3>
<ul>
<li>Persistent data structures</li>
<li>Low-cost writes</li>
<li>High-cost conversion to compatible structures</li>
<li>No downstream" immutability</li>
</ul>
<aside class="notes">
</aside>
</section>
<section>
<h3>Seamless-immutable / Deep-freeze</h3>
<ul>
<li>Uses ES5's Object.freeze() to lock-down existing structures</li>
<li>High-cost writes</li>
<li>zero-cost conversion to compatible structures</li>
<li>"downstream" immutability</li>
</ul>
<aside class="notes">
</aside>
</section>
<section>
<h3>Seamless-immutable Advantages</h3>
<ul>
<li>Interop with ALL existing JavaScript libraries</li>
<li>Rewrites common routines to return only immutable values (e.g. map)</li>
<li>Special cases for objects that don't respond well to being Frozen</li>
<li>Release build addresses write performance</li>
</ul>
<aside class="notes">
</aside>
</section>
<section>
<h3>Cursors</h3>
<ul>
<li>Manage immutable structures that evolve over time</li>
<li>Writable windows to subordinate structures</li>
<li>Change detection</li>
</ul>
<aside class="notes">
</aside>
</section>
<section>
<h3>Cursors with React</h3>
<ul>
<li>Trivial Flux Implementation</li>
<li>Application state exposed to react ONLY via 'props'</li>
<li>UI state ONLY exposed to react via 'state'</li>
<li>Props CANNOT be modified. Strict enforcement of a prior convention.</li>
<li>Cursors ONLY available to controllers (commands, ajax)</li>
<li>Pure React components - enables render optimizations</li>
</ul>
<aside class="notes">
</aside>
</section>
<section>
<h3>Demo</h3>
</section>
<section>
<h3>Other Benefits</h3>
<ul>
<li>Import / export state</li>
<li>Data transition history</li>
</ul>
</section>
<section>
<h2>Links</h2>
<ul>
<li><a href="https://github.com/MartinSnyder/seamless-immutable-cursor">Seamless Immutable Cursor (GitHub)</a></li>
<li><a href="https://www.npmjs.com/package/seamless-immutable-cursor">Seamless Immutable Cursor (npm)</a></li>
<li><a href="https://github.com/rtfeldman/seamless-immutable">Seamless Immutable</a></li>
<li><a href="http://martinsnyder.net/">http://martinsnyder.net/</a></li>
</ul>
<aside class="notes">
Slides and source code available in the git repository
</aside>
</section>
<section>
<h1>Thank You!</h1>
<p>
<small><a href="http://martinsnyder.net">Martin Snyder</a> / <a href="https://twitter.com/MartinSnyder">@MartinSnyder</a> / <a href="http://www.wingspan.com">Wingspan Technology, Inc.</a></small>
</p>
<aside class="notes">
</aside>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// More info https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
history: true,
// More info https://github.com/hakimel/reveal.js#dependencies
dependencies: [
{ src: 'plugin/markdown/marked.js' },
{ src: 'plugin/markdown/markdown.js' },
{ src: 'plugin/notes/notes.js', async: true },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
]
});
</script>
</body>
</html>