<commit_before>// Import React
import React from "react";

// Import Spectacle Core tags
import {
  BlockQuote,
  Cite,
  Deck,
  Heading,
  ListItem,
  List,
  Quote,
  Slide,
  Text,
  Layout,
  Fill,
  CodePane,
  Image,
  Appear
} from "spectacle";

// Import image preloader util
import preloader from "spectacle/lib/utils/preloader";

// Import theme
import createTheme from "spectacle/lib/themes/default";

// Require CSS
require("normalize.css");
require("spectacle/lib/themes/default/index.css");

const images = {
  reasonLogo: require("../assets/reason-logo.png"),
  twitterLogo: require("../assets/twitter-logo.png"),
  eslintLogo: require("../assets/eslint.png"),
  flowLogo: require("../assets/flow.png"),
  babelLogo: require("../assets/babel.png"),
  prettierLogo: require("../assets/prettier.png"),
  ocamlLogo: require("../assets/ocaml.png"),
  whatsApp: require("../assets/whatsapp.svg"),
  erlang: require("../assets/erlang.png"),
  elixir: require("../assets/elixir.png"),
  bloombergKeyboard: require("../assets/bloomberg.jpg"),
  reasonReactLogo: require("../assets/reasonreact.png"),
  atomTypes: require("../assets/types.png"),
  reasonTooling: require("../assets/reasontools.png"),
  refmt: require("../assets/refmt.gif"),
  betterErrors: require("../assets/bettererrors.png"),
  unikernels: require("../assets/unikernels.png"),
  seanGrove: require("../assets/seangrove.jpeg"),
  mateusz: require("../assets/mateusz.png"),
  beerChuck: require("../assets/beerchuck.jpg"),
  elm: require("../assets/elm.png"),
  lair: require("../assets/lair.jpg")
};

preloader(images);

const theme = createTheme({
  primary: "white",
  secondary: "#333333",
  tertiary: "#db4d3f",
  quartenary: "#CECECE"
}, {
  primary: "Montserrat",
  secondary: "Helvetica"
});

export default class Presentation extends React.Component {
  render() {
    return (
      <Deck transition={["slide"]} transitionDuration={500} theme={theme}>

        <Slide transition={["slide"]} bgColor="primary">
          <Image src={images.reasonLogo} width="100%"/>
          <Layout>
            <Fill>
              <Heading size={6} caps textColor="primary" bgColor="tertiary" margin={10} padding={"5px 0"}>
                Marcel Cutts
              </Heading>
            </Fill>
            <Fill>
              <Heading size={6} caps textColor="primary" bgColor="tertiary" margin={10} padding={"5px 0"}>
                @marcelcutts <Image src={images.twitterLogo} height="30px" margin="3px 0 0 0"/>
              </Heading>
            </Fill>
          </Layout>
        </Slide>

        <Slide transition={["slide"]} bgColor="#2d2d2d">
          <CodePane
            lang="javascript"
            source={require("raw-loader!../assets/callbacks.example")}
          />
        </Slide>

        <Slide transition={["slide"]} bgColor="#2d2d2d">
          <CodePane
            lang="javascript"
            source={require("raw-loader!../assets/promises.example")}
          />
        </Slide>

        <Slide transition={["slide"]} bgColor="#2d2d2d">
          <CodePane
            lang="javascript"
            source={require("raw-loader!../assets/async.example")}
          />
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Layout>
            <Fill>
              <Image src={images.flowLogo} height="250px"/>
            </Fill>
            <Fill>
              <Image src={images.babelLogo} height="250px"/>
            </Fill>
          </Layout>
          <Layout>
            <Fill>
              <Image src={images.eslintLogo} height="250px"/>
            </Fill>
            <Fill>
              <Image src={images.prettierLogo} height="250px"/>
            </Fill>
          </Layout>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Image src={images.reasonLogo} width="100%"/>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Image src={images.ocamlLogo} width="100%"/>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Heading fit caps >Reason is... </Heading>
          <Appear>
            <Heading size={4} textAlign="left" margin={"30px 0 0 50px"}> 📝 New syntax for OCaml</Heading>
          </Appear>
          <Appear>
            <Heading size={4} textAlign="left" margin={"30px 0 0 50px"}> 🌊 Compiler workflow</Heading>
          </Appear>
          <Appear>
            <Heading size={4} textAlign="left" margin={"30px 0 0 50px"}> 🛁 Docs, libs, utils</Heading>
          </Appear>
        </Slide>

        <Slide transition={["slide"]} bgImage={images.reasonTooling} />

        <Slide transition={["slide"]} bgColor="tertiary">
          <Heading fit textColor="primary">Can an old language like </Heading>
          <Heading fit textColor="primary">OCaml</Heading>
          <Heading fit textColor="primary">be relevant to us now?</Heading>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Image src={images.erlang} width="40%"/>
          <Image src={images.elixir} width="40%" margin={"0 0 0 10%"}/>
        </Slide>

        <Slide transition={["slide"]} bgColor="secondary">
          <Image src={images.whatsApp} width="50%"/>
          <Appear>
            <Heading fit caps textColor="primary">$19 billion</Heading>
          </Appear>
        </Slide>

        <Slide transition={["slide"]} bgColor="tertiary">
          <Heading fit textColor="primary">Marcel, you absolute idiot</Heading>
          <Heading fit textColor="primary">OCaml</Heading>
          <Heading fit textColor="primary">{"doesn't run in browsers"}</Heading>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Image src={images.bloombergKeyboard} width="100%"/>
          <Appear>
            <Heading size={2}>Bucklescript</Heading>
          </Appear>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Heading size={2}>OCaml/Reason</Heading>
          <Text margin={"30px 0"}>⬇</Text>
          <Heading size={2}>Bucklescript</Heading>
          <Text margin={"30px 0"}>⬇</Text>
          <Heading size={2}>JavaScript</Heading>
        </Slide>

        <Slide transition={["slide"]} bgColor="tertiary">
          <Heading size={3} textAlign="left" textColor="primary" margin={10}>
            Why should I write JavaScript in a meta language for a 20 year old systems language that is compiled to JavaScript by a fancy keyboard company?
          </Heading>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Layout>
            <Fill>
              <Image src={images.flowLogo} height="250px"/>
            </Fill>
            <Fill>
              <Image src={images.babelLogo} height="250px"/>
            </Fill>
          </Layout>
          <Layout>
            <Fill>
              <Image src={images.eslintLogo} height="250px"/>
            </Fill>
            <Fill>
              <Image src={images.prettierLogo} height="250px"/>
            </Fill>
          </Layout>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Image src={images.flowLogo} height="100%"/>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Heading fit caps textColor="tertiary">
            OCaml is
          </Heading>
          <Heading fit caps textColor="tertiary">
            typed
          </Heading>
          <Appear>
            <Heading size={6} textColor="tertiary" margin={10}>
              (Flow is written in OCaml)
            </Heading>
          </Appear>
        </Slide>

        <Slide transition={["slide"]} bgImage={images.atomTypes} />

        <Slide transition={["slide"]} bgColor="primary">
          <Image src={images.babelLogo} width="100%"/>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Heading size={5} caps textColor="tertiary" margin={10}>
            Bucklescript compiles
          </Heading>
          <Heading fit caps textColor="tertiary" margin={10}>
            10x faster
          </Heading>
          <Heading size={5} caps textColor="tertiary" margin={10}>
            than TypeScript
          </Heading>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Heading fit textColor="tertiary">
            Human readable
          </Heading>
          <Heading fit textColor="tertiary">
            JS output
          </Heading>
          <Heading size={1} textColor="tertiary">
             😱
          </Heading>

        </Slide>

        <Slide transition={["slide"]} bgColor="#2d2d2d" className="compiled">
          <CodePane
            lang="javascript"
            source={require("raw-loader!../assets/compiledoutput1.example")}
          />
        </Slide>

        <Slide transition={["slide"]} bgColor="#2d2d2d" className="compiled">
          <CodePane
            lang="javascript"
            source={require("raw-loader!../assets/compiledoutput2.example")}
          />
        </Slide>

        <Slide transition={["slide"]} bgColor="secondary">
          <Image src={images.seanGrove} height="50%"/>
          <Heading fit caps textColor="primary">@sgrove</Heading>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Image src={images.prettierLogo} height="100%"/>
        </Slide>

        <Slide transition={["slide"]} bgImage={images.refmt} />

        <Slide transition={["slide"]} bgColor="primary">
          <Image src={images.eslintLogo} height="400px"/>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Image src={images.betterErrors} height="100%"/>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Heading fit caps textColor="tertiary">
            Tames the
          </Heading>
          <Heading fit caps textColor="tertiary">
            meta-language
          </Heading>
        </Slide>

        <Slide transition={["slide"]} bgColor="#2d2d2d" className="dep">
          <CodePane
            lang="ocaml"
            source={require("raw-loader!../assets/deprecation.example")}
          />
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Heading fit caps textColor="tertiary" margin={10}>
            INSANE Reach
          </Heading>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Heading fit caps textColor="tertiary" margin={10}>
              X86/64! ARM!
          </Heading>
          <Heading fit caps textColor="tertiary" margin={10}>
              Real native mobile dev!
          </Heading>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Heading fit caps textColor="tertiary" margin={10}>
              ⚡ Unikernels?! ⚡
          </Heading>
        </Slide>

        <Slide transition={["slide"]} bgImage={images.unikernels} />

        <Slide transition={["slide"]} bgColor="primary">
          <Image src={images.reasonReactLogo} width="40%"/>
          <Heading size={6} fit caps textColor="tertiary" margin={10}>
            Reason-React
          </Heading>
        </Slide>

        <Slide transition={["slide"]} bgColor="#2d2d2d">
          <CodePane
            lang="ocaml"
            source={require("raw-loader!../assets/reasonreact.example")}
          />
        </Slide>

        <Slide transition={["slide"]} bgColor="#2d2d2d" className="interop">
          <CodePane
            lang="javascript"
            source={require("raw-loader!../assets/interop.example")}
          />
        </Slide>

        <Slide transition={["slide"]} bgImage={images.mateusz} className="interop" />

        <Slide transition={["slide"]} bgImage={images.beerChuck} className="interop">
          <Heading fit caps textColor="tertiary">
            Create
          </Heading>
          <Heading fit caps textColor="tertiary">
            Reason React
          </Heading>
          <Heading fit caps textColor="tertiary">
            App
          </Heading>
        </Slide>

        <Slide transition={["slide"]} bgColor="tertiary">
          <Heading fit caps textColor="primary">
            Should I use
          </Heading>
          <Heading fit caps textColor="primary">
            Reason
          </Heading>
          <Heading fit caps textColor="primary">
            right now?
          </Heading>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Heading fit caps textColor="tertiary" margin={10} padding={"5px 0"}>
            Not yet...
          </Heading>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Heading size={3} caps textAlign="left" textColor="tertiary" margin={10} padding={"30px 0"}>
            👶 Very immature
          </Heading>
          <Heading size={3} caps textAlign="left" textColor="tertiary" margin={10} padding={"30px 0"}>
            🌲 Small ecosystem
          </Heading>
          <Heading size={3} caps textAlign="left" textColor="tertiary" margin={10} padding={"30px 0"}>
            👩👩👧👧 New community
          </Heading>
        </Slide>

        <Slide transition={["slide"]} bgImage={images.lair} />

        <Slide transition={["slide"]} bgColor="primary">
          <Image src={images.elm} height="100%"/>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Heading fit caps textColor="primary" bgColor="tertiary" margin={10} padding={"5px 0"}>
            Hire me
          </Heading>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Heading fit caps textColor="tertiary">
            Thanks
          </Heading>
          <Heading fit caps textColor="tertiary" margin={"0 0 80px 0"}>
            for listening!
          </Heading>
          <Layout>
            <Fill>
              <Heading size={6} caps textColor="primary" bgColor="tertiary" margin={10} padding={"5px 0"}>
                Marcel Cutts
              </Heading>
            </Fill>
            <Fill>
              <Heading size={6} caps textColor="primary" bgColor="tertiary" margin={10} padding={"5px 0"}>
                @marcelcutts <Image src={images.twitterLogo} height="30px" margin="3px 0 0 0"/>
              </Heading>
            </Fill>
          </Layout>
        </Slide>
      </Deck>
    );
  }
}
<commit_msg>Added react native slide<commit_after>// Import React
import React from "react";

// Import Spectacle Core tags
import {
  BlockQuote,
  Cite,
  Deck,
  Heading,
  ListItem,
  List,
  Quote,
  Slide,
  Text,
  Layout,
  Fill,
  CodePane,
  Image,
  Appear
} from "spectacle";

// Import image preloader util
import preloader from "spectacle/lib/utils/preloader";

// Import theme
import createTheme from "spectacle/lib/themes/default";

// Require CSS
require("normalize.css");
require("spectacle/lib/themes/default/index.css");

const images = {
  reasonLogo: require("../assets/reason-logo.png"),
  twitterLogo: require("../assets/twitter-logo.png"),
  eslintLogo: require("../assets/eslint.png"),
  flowLogo: require("../assets/flow.png"),
  babelLogo: require("../assets/babel.png"),
  prettierLogo: require("../assets/prettier.png"),
  ocamlLogo: require("../assets/ocaml.png"),
  whatsApp: require("../assets/whatsapp.svg"),
  erlang: require("../assets/erlang.png"),
  elixir: require("../assets/elixir.png"),
  bloombergKeyboard: require("../assets/bloomberg.jpg"),
  reasonReactLogo: require("../assets/reasonreact.png"),
  atomTypes: require("../assets/types.png"),
  reasonTooling: require("../assets/reasontools.png"),
  refmt: require("../assets/refmt.gif"),
  betterErrors: require("../assets/bettererrors.png"),
  unikernels: require("../assets/unikernels.png"),
  seanGrove: require("../assets/seangrove.jpeg"),
  mateusz: require("../assets/mateusz.png"),
  beerChuck: require("../assets/beerchuck.jpg"),
  elm: require("../assets/elm.png"),
  lair: require("../assets/lair.jpg")
};

preloader(images);

const theme = createTheme({
  primary: "white",
  secondary: "#333333",
  tertiary: "#db4d3f",
  quartenary: "#CECECE"
}, {
  primary: "Montserrat",
  secondary: "Helvetica"
});

export default class Presentation extends React.Component {
  render() {
    return (
      <Deck transition={["slide"]} transitionDuration={500} theme={theme}>

        <Slide transition={["slide"]} bgColor="primary">
          <Image src={images.reasonLogo} width="100%"/>
          <Layout>
            <Fill>
              <Heading size={6} caps textColor="primary" bgColor="tertiary" margin={10} padding={"5px 0"}>
                Marcel Cutts
              </Heading>
            </Fill>
            <Fill>
              <Heading size={6} caps textColor="primary" bgColor="tertiary" margin={10} padding={"5px 0"}>
                @marcelcutts <Image src={images.twitterLogo} height="30px" margin="3px 0 0 0"/>
              </Heading>
            </Fill>
          </Layout>
        </Slide>

        <Slide transition={["slide"]} bgColor="#2d2d2d">
          <CodePane
            lang="javascript"
            source={require("raw-loader!../assets/callbacks.example")}
          />
        </Slide>

        <Slide transition={["slide"]} bgColor="#2d2d2d">
          <CodePane
            lang="javascript"
            source={require("raw-loader!../assets/promises.example")}
          />
        </Slide>

        <Slide transition={["slide"]} bgColor="#2d2d2d">
          <CodePane
            lang="javascript"
            source={require("raw-loader!../assets/async.example")}
          />
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Layout>
            <Fill>
              <Image src={images.flowLogo} height="250px"/>
            </Fill>
            <Fill>
              <Image src={images.babelLogo} height="250px"/>
            </Fill>
          </Layout>
          <Layout>
            <Fill>
              <Image src={images.eslintLogo} height="250px"/>
            </Fill>
            <Fill>
              <Image src={images.prettierLogo} height="250px"/>
            </Fill>
          </Layout>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Image src={images.reasonLogo} width="100%"/>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Image src={images.ocamlLogo} width="100%"/>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Heading fit caps >Reason is... </Heading>
          <Appear>
            <Heading size={4} textAlign="left" margin={"30px 0 0 50px"}> 📝 New syntax for OCaml</Heading>
          </Appear>
          <Appear>
            <Heading size={4} textAlign="left" margin={"30px 0 0 50px"}> 🌊 Compiler workflow</Heading>
          </Appear>
          <Appear>
            <Heading size={4} textAlign="left" margin={"30px 0 0 50px"}> 🛁 Docs, libs, utils</Heading>
          </Appear>
        </Slide>

        <Slide transition={["slide"]} bgImage={images.reasonTooling} />

        <Slide transition={["slide"]} bgColor="tertiary">
          <Heading fit textColor="primary">Can an old language like </Heading>
          <Heading fit textColor="primary">OCaml</Heading>
          <Heading fit textColor="primary">be relevant to us now?</Heading>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Image src={images.erlang} width="40%"/>
          <Image src={images.elixir} width="40%" margin={"0 0 0 10%"}/>
        </Slide>

        <Slide transition={["slide"]} bgColor="secondary">
          <Image src={images.whatsApp} width="50%"/>
          <Appear>
            <Heading fit caps textColor="primary">$19 billion</Heading>
          </Appear>
        </Slide>

        <Slide transition={["slide"]} bgColor="tertiary">
          <Heading fit textColor="primary">Marcel, you absolute idiot</Heading>
          <Heading fit textColor="primary">OCaml</Heading>
          <Heading fit textColor="primary">{"doesn't run in browsers"}</Heading>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Image src={images.bloombergKeyboard} width="100%"/>
          <Appear>
            <Heading size={2}>Bucklescript</Heading>
          </Appear>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Heading size={2}>OCaml/Reason</Heading>
          <Text margin={"30px 0"}>⬇</Text>
          <Heading size={2}>Bucklescript</Heading>
          <Text margin={"30px 0"}>⬇</Text>
          <Heading size={2}>JavaScript</Heading>
        </Slide>

        <Slide transition={["slide"]} bgColor="tertiary">
          <Heading size={3} textAlign="left" textColor="primary" margin={10}>
            Why should I write JavaScript in a meta language for a 20 year old systems language that is compiled to JavaScript by a fancy keyboard company?
          </Heading>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Layout>
            <Fill>
              <Image src={images.flowLogo} height="250px"/>
            </Fill>
            <Fill>
              <Image src={images.babelLogo} height="250px"/>
            </Fill>
          </Layout>
          <Layout>
            <Fill>
              <Image src={images.eslintLogo} height="250px"/>
            </Fill>
            <Fill>
              <Image src={images.prettierLogo} height="250px"/>
            </Fill>
          </Layout>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Image src={images.flowLogo} height="100%"/>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Heading fit caps textColor="tertiary">
            OCaml is
          </Heading>
          <Heading fit caps textColor="tertiary">
            typed
          </Heading>
          <Appear>
            <Heading size={6} textColor="tertiary" margin={10}>
              (Flow is written in OCaml)
            </Heading>
          </Appear>
        </Slide>

        <Slide transition={["slide"]} bgImage={images.atomTypes} />

        <Slide transition={["slide"]} bgColor="primary">
          <Image src={images.babelLogo} width="100%"/>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Heading size={5} caps textColor="tertiary" margin={10}>
            Bucklescript compiles
          </Heading>
          <Heading fit caps textColor="tertiary" margin={10}>
            10x faster
          </Heading>
          <Heading size={5} caps textColor="tertiary" margin={10}>
            than TypeScript
          </Heading>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Heading fit textColor="tertiary">
            Human readable
          </Heading>
          <Heading fit textColor="tertiary">
            JS output
          </Heading>
          <Heading size={1} textColor="tertiary">
             😱
          </Heading>

        </Slide>

        <Slide transition={["slide"]} bgColor="#2d2d2d" className="compiled">
          <CodePane
            lang="javascript"
            source={require("raw-loader!../assets/compiledoutput1.example")}
          />
        </Slide>

        <Slide transition={["slide"]} bgColor="#2d2d2d" className="compiled">
          <CodePane
            lang="javascript"
            source={require("raw-loader!../assets/compiledoutput2.example")}
          />
        </Slide>

        <Slide transition={["slide"]} bgColor="secondary">
          <Image src={images.seanGrove} height="50%"/>
          <Heading fit caps textColor="primary">@sgrove</Heading>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Image src={images.prettierLogo} height="100%"/>
        </Slide>

        <Slide transition={["slide"]} bgImage={images.refmt} />

        <Slide transition={["slide"]} bgColor="primary">
          <Image src={images.eslintLogo} height="400px"/>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Image src={images.betterErrors} height="100%"/>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Heading fit caps textColor="tertiary">
            Tames the
          </Heading>
          <Heading fit caps textColor="tertiary">
            meta-language
          </Heading>
        </Slide>

        <Slide transition={["slide"]} bgColor="#2d2d2d" className="dep">
          <CodePane
            lang="ocaml"
            source={require("raw-loader!../assets/deprecation.example")}
          />
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Heading fit caps textColor="tertiary" margin={10}>
            INSANE Reach
          </Heading>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Heading fit caps textColor="tertiary" margin={10}>
              X86/64! ARM!
          </Heading>
          <Heading fit caps textColor="tertiary" margin={10}>
              Real native mobile dev!
          </Heading>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Heading fit caps textColor="tertiary" margin={10}>
              ⚡ Unikernels?! ⚡
          </Heading>
        </Slide>

        <Slide transition={["slide"]} bgImage={images.unikernels} />

        <Slide transition={["slide"]} bgColor="primary">
          <Image src={images.reasonReactLogo} width="40%"/>
          <Heading size={6} fit caps textColor="tertiary" margin={10}>
            Reason-React
          </Heading>
        </Slide>

        <Slide transition={["slide"]} bgColor="#2d2d2d">
          <CodePane
            lang="ocaml"
            source={require("raw-loader!../assets/reasonreact.example")}
          />
        </Slide>

        <Slide transition={["slide"]} bgColor="#2d2d2d" className="interop">
          <CodePane
            lang="javascript"
            source={require("raw-loader!../assets/interop.example")}
          />
        </Slide>

        <Slide transition={["slide"]} bgImage={images.mateusz} />

        <Slide transition={["slide"]} bgImage={images.beerChuck}>
          <Heading fit caps textColor="tertiary">
            Create
          </Heading>
          <Heading fit caps textColor="tertiary">
            Reason React
          </Heading>
          <Heading fit caps textColor="tertiary">
            App
          </Heading>
        </Slide>

        <Slide transition={["slide"]}>
          <Heading fit caps textColor="tertiary">
            React Native?
          </Heading>
          <Heading fit caps textColor="tertiary" margin={"40px 0"}>
            bs-react-native
          </Heading>
          <Heading size={4} caps textColor="tertiary">
            (By @wokalski)
          </Heading>
        </Slide>

        <Slide transition={["slide"]} bgColor="tertiary">
          <Heading fit caps textColor="primary">
            Should I use
          </Heading>
          <Heading fit caps textColor="primary">
            Reason
          </Heading>
          <Heading fit caps textColor="primary">
            right now?
          </Heading>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Heading fit caps textColor="tertiary" margin={10} padding={"5px 0"}>
            Not yet...
          </Heading>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Heading size={3} caps textAlign="left" textColor="tertiary" margin={10} padding={"30px 0"}>
            👶 Very immature
          </Heading>
          <Heading size={3} caps textAlign="left" textColor="tertiary" margin={10} padding={"30px 0"}>
            🌲 Small ecosystem
          </Heading>
          <Heading size={3} caps textAlign="left" textColor="tertiary" margin={10} padding={"30px 0"}>
            👩👩👧👧 New community
          </Heading>
        </Slide>

        <Slide transition={["slide"]} bgImage={images.lair} />

        <Slide transition={["slide"]} bgColor="primary">
          <Image src={images.elm} height="100%"/>
        </Slide>

        <Slide transition={["slide"]} bgColor="primary">
          <Heading fit caps textColor="tertiary">
            Thanks
          </Heading>
          <Heading fit caps textColor="tertiary" margin={"0 0 80px 0"}>
            for listening!
          </Heading>
          <Layout>
            <Fill>
              <Heading size={6} caps textColor="primary" bgColor="tertiary" margin={10} padding={"5px 0"}>
                Marcel Cutts
              </Heading>
            </Fill>
            <Fill>
              <Heading size={6} caps textColor="primary" bgColor="tertiary" margin={10} padding={"5px 0"}>
                @marcelcutts <Image src={images.twitterLogo} height="30px" margin="3px 0 0 0"/>
              </Heading>
            </Fill>
          </Layout>
        </Slide>
      </Deck>
    );
  }
}
<|endoftext|>


<commit_before>// Import React
import React from "react";

// Import Spectacle Core tags
import {
  Appear,
  BlockQuote,
  Cite,
  CodePane,
  Deck,
  Fill,
  Heading,
  Image,
  Layout,
  Link,
  ListItem,
  List,
  Markdown,
  Quote,
  Slide,
  Spectacle,
  Text
} from "spectacle";

// Import CodeSlide plugin
import CodeSlide from 'spectacle-code-slide';

// Import image preloader util
import preloader from "spectacle/lib/utils/preloader";

// Import theme
import createTheme from "spectacle/lib/themes/default";

// Import custom component
import Interactive from "../assets/interactive";

// Require CSS
require("normalize.css");
require("spectacle/lib/themes/default/index.css");

const images = {
  city: require("../assets/city.jpg"),
  kat: require("../assets/kat.png"),
  logo: require("../assets/formidable-logo.svg"),
  markdown: require("../assets/markdown.png")
};

preloader(images);

const theme = createTheme({
  primary: "#1769ff"
});

export default class Presentation extends React.Component {
  render() {
    return (
      <Spectacle theme={theme}>
        <Deck transition={[]} transitionDuration={500} progress="bar" controls="0">

          {/* BLANK SLIDE */}
          <Slide>
          </Slide>

          <Slide transition={["fade"]} bgColor="primary">
            <Heading size={1} fit caps lineHeight={1} textColor="black">
              Localization
            </Heading>
            <Heading size={1} fit caps>
              How to write code that works in more than one language
            </Heading>
          </Slide>

          {/* INTRO SLIDE */}
          <Slide transition={["fade"]} bgColor="primary">
            <Heading size={1} fit>
              Translations.php
            </Heading>
            <Appear fid="1">
              <Heading size={1} fit>
                const SOME_KEY => 'snake_case_value'
              </Heading>
            </Appear>
            <CodePane
              lang="jsx"
              source={require("raw!../assets/translations.php")}
              margin="20px auto"
              textSize="16px"
            />
          </Slide>

          {/* CONTROLLER TRANSLATION - BEFORE */}
          <Slide transition={[]} bgColor="primary">
            <Heading size={1} fit>
              someController.php
            </Heading>
            <CodePane
              lang="jsx"
              source={require("raw!../assets/some_controller_before.php")}
              margin="20px auto"
              textSize="16px"
            />
          </Slide>

          {/* CONTROLLER TRANSLATION - AFTER */}
          <Slide transition={[]} bgColor="primary">
            <Heading size={1} fit>
              someController.php
            </Heading>
            <CodePane
              lang="jsx"
              source={require("raw!../assets/some_controller.php")}
              margin="20px auto"
              textSize="16px"
            />
          </Slide>

          {/* CONTROLLER TRANSLATION - AFTER WITH TRANSLATIONS FILE */}
          <Slide transition={[]} bgColor="primary">

            <CodePane
              lang="jsx"
              source={require("raw!../assets/some_controller.php")}
              margin="20px auto"
              textSize="14px"
            />
            <CodePane
              lang="jsx"
              source={require("raw!../assets/translations_php.php")}
              margin="20px auto"
              textSize="14px"
            />
          </Slide>

          {/* JS TRANSLATION - BEFORE */}
          <Slide transition={[]} bgColor="primary">
            <Heading size={4} textColor="#FFF">
              aFile.js - not localized
            </Heading>
            <CodePane
              lang="jsx"
              source={require("raw!../assets/aFileBefore.js")}
              margin="20px auto"
              textSize="14px"
            />
          </Slide>

          {/* JS TRANSLATION - AFTER */}
          <Slide transition={[]} bgColor="primary">
            <Heading size={4} textColor="#FFF">
              aFile.js - localized
            </Heading>
            <CodePane
              lang="jsx"
              source={require("raw!../assets/aFileAfter.js")}
              margin="20px auto"
              textSize="14px"
            />

          </Slide>

          {/* JS TRANSLATION - AFTER WITH TRANSLATIONS FILE */}
          <Slide transition={[]} bgColor="primary">
            <Heading size={4} textColor="#FFF">
              aFile.js - localized
            </Heading>
            <CodePane
              lang="jsx"
              source={require("raw!../assets/aFileAfter.js")}
              margin="20px auto"
              textSize="14px"
            />
            <Heading size={4} textColor="#FFF">
              Translations.php
            </Heading>
            <CodePane
              lang="jsx"
              source={require("raw!../assets/translations_js.php")}
              margin="20px auto"
              textSize="14px"
            />
          </Slide>

          {/* MUSTACHE TRANSLATION - BEFORE */}
          <Slide transition={[]} bgColor="primary">
            <Heading size={4} textColor="#FFF">
              aFile.mustache - not localized
            </Heading>
            <CodePane
              lang="jsx"
              source={require("raw!../assets/aFileBefore.mustache")}
              margin="20px auto"
              textSize="14px"
            />
          </Slide>

          {/* MUSTACHE TRANSLATION - AFTER */}
          <Slide transition={[]} bgColor="primary">
            <Heading size={4} textColor="#FFF">
              aFile.mustache - localized
            </Heading>
            <CodePane
              lang="jsx"
              source={require("raw!../assets/aFileAfter.mustache")}
              margin="20px auto"
              textSize="14px"
            />
          </Slide>

          {/* MUSTACHE TRANSLATION - AFTER - WITH TRANSLATIONS FILE */}
          <Slide transition={[]} bgColor="primary">
            <Heading size={4} textColor="#FFF">
              aFile.mustache - localized
            </Heading>
            <CodePane
              lang="jsx"
              source={require("raw!../assets/aFileAfter.mustache")}
              margin="20px auto"
              textSize="14px"
            />
            <CodePane
              lang="jsx"
              source={require("raw!../assets/translations_mustache.php")}
              margin="20px auto"
              textSize="14px"
            />
          </Slide>

          <Slide transition={["slide"]} bgImage={images.city.replace("/", "")} bgDarken={0.75}>
            <Appear fid="1">
              <Heading size={1} caps fit textColor="primary">
                Help me, Zoo!!!
              </Heading>
            </Appear>
            <Appear fid="2">
              <Heading size={1} caps fit textColor="tertiary">
                Seriously
              </Heading>
            </Appear>
            <Appear fid="3">
              <Heading size={1} caps fit textColor="primary">
                Why???
              </Heading>
            </Appear>
          </Slide>

          <Slide transition={["zoom", "fade"]} bgColor="primary">
            <Heading caps fit>Flexible Layouts</Heading>
            <Layout>
              <Fill>
                <Heading size={4} caps textColor="secondary" bgColor="white" margin={10}>
                  Left
                </Heading>
              </Fill>
              <Fill>
                <Heading size={4} caps textColor="secondary" bgColor="white" margin={10}>
                  Right
                </Heading>
              </Fill>
            </Layout>
          </Slide>

          <Slide transition={["slide"]} bgColor="black">

              <Quote>Wonderfully formatted quotes</Quote>
              Ken Wheeler

          </Slide>

          <Slide transition={["spin", "zoom"]} bgColor="tertiary">
            <Heading caps fit size={1} textColor="primary">
              Inline Markdown
            </Heading>
            <Markdown>
              {`
![Markdown Logo](${images.markdown.replace("/", "")})

You can write inline images, [Markdown Links](http://commonmark.org), paragraph text and most other markdown syntax
* Lists too!
* With ~~strikethrough~~ and _italic_
* And lets not forget **bold**
              `}
            </Markdown>
          </Slide>

          <Slide transition={["slide", "spin"]} bgColor="primary">
            <Heading caps fit size={1} textColor="tertiary">
              Smooth
            </Heading>
            <Heading caps fit size={1} textColor="secondary">
              Combinable Transitions
            </Heading>
          </Slide>

          <Slide transition={["fade"]} bgColor="secondary" textColor="primary">
            <List>
              <Appear><ListItem>Inline style based theme system</ListItem></Appear>
              <Appear><ListItem>Autofit text</ListItem></Appear>
              <Appear><ListItem>Flexbox layout system</ListItem></Appear>
              <Appear><ListItem>React-Router navigation</ListItem></Appear>
              <Appear><ListItem>PDF export</ListItem></Appear>
              <Appear><ListItem>And...</ListItem></Appear>
            </List>
          </Slide>

          <Slide transition={["slide"]} bgColor="primary">
            <Heading size={1} caps fit textColor="tertiary">
              Your presentations are interactive
            </Heading>
            <Interactive/>
          </Slide>

          <Slide transition={["spin", "slide"]} bgColor="tertiary">
            <Heading size={1} caps fit lineHeight={1.5} textColor="primary">
              Made with love in Seattle by
            </Heading>
            <Link href="http://www.formidablelabs.com"><Image width="100%" src={images.logo}/></Link>
          </Slide>

        </Deck>
      </Spectacle>
    );
  }
}
<commit_msg>Add general outline points<commit_after>// Import React
import React from "react";

// Import Spectacle Core tags
import {
  Appear,
  BlockQuote,
  Cite,
  CodePane,
  Deck,
  Fill,
  Heading,
  Image,
  Layout,
  Link,
  ListItem,
  List,
  Markdown,
  Quote,
  Slide,
  Spectacle,
  Text
} from "spectacle";

// Import CodeSlide plugin
import CodeSlide from 'spectacle-code-slide';

// Import image preloader util
import preloader from "spectacle/lib/utils/preloader";

// Import theme
import createTheme from "spectacle/lib/themes/default";

// Import custom component
import Interactive from "../assets/interactive";

// Require CSS
require("normalize.css");
require("spectacle/lib/themes/default/index.css");

const images = {
  city: require("../assets/city.jpg"),
  kat: require("../assets/kat.png"),
  logo: require("../assets/formidable-logo.svg"),
  markdown: require("../assets/markdown.png")
};

preloader(images);

const theme = createTheme({
  primary: "#1769ff"
});

export default class Presentation extends React.Component {
  render() {
    return (
      <Spectacle theme={theme}>
        <Deck transition={[]} transitionDuration={500} progress="bar" controls="0">

          {/* BLANK SLIDE */}
          <Slide>
          </Slide>

          <Slide transition={["fade"]} bgColor="primary">
            <Heading size={1} fit caps lineHeight={1} textColor="black">
              Localization
            </Heading>
            <Heading size={1} fit caps>
              How to write code that works in more than one language
            </Heading>
          </Slide>

          {/* INTRO SLIDE */}
          <Slide transition={["fade"]} bgColor="primary">
            <Heading size={1} fit>
              Translations.php
            </Heading>
            <Appear fid="1">
              <Heading size={1} fit>
                const SOME_KEY => 'snake_case_value'
              </Heading>
            </Appear>
            <CodePane
              lang="jsx"
              source={require("raw!../assets/translations.php")}
              margin="20px auto"
              textSize="16px"
            />
          </Slide>

          {/* CONTROLLER TRANSLATION - BEFORE */}
          <Slide transition={[]} bgColor="primary">
            <Heading size={1} fit>
              someController.php
            </Heading>
            <CodePane
              lang="jsx"
              source={require("raw!../assets/some_controller_before.php")}
              margin="20px auto"
              textSize="16px"
            />
          </Slide>

          {/* CONTROLLER TRANSLATION - AFTER */}
          <Slide transition={[]} bgColor="primary">
            <Heading size={1} fit>
              someController.php
            </Heading>
            <CodePane
              lang="jsx"
              source={require("raw!../assets/some_controller.php")}
              margin="20px auto"
              textSize="16px"
            />
          </Slide>

          {/* CONTROLLER TRANSLATION - AFTER WITH TRANSLATIONS FILE */}
          <Slide transition={[]} bgColor="primary">

            <CodePane
              lang="jsx"
              source={require("raw!../assets/some_controller.php")}
              margin="20px auto"
              textSize="14px"
            />
            <CodePane
              lang="jsx"
              source={require("raw!../assets/translations_php.php")}
              margin="20px auto"
              textSize="14px"
            />
          </Slide>

          {/* JS TRANSLATION - BEFORE */}
          <Slide transition={[]} bgColor="primary">
            <Heading size={4} textColor="#FFF">
              aFile.js - not localized
            </Heading>
            <CodePane
              lang="jsx"
              source={require("raw!../assets/aFileBefore.js")}
              margin="20px auto"
              textSize="14px"
            />
          </Slide>

          {/* JS TRANSLATION - AFTER */}
          <Slide transition={[]} bgColor="primary">
            <Heading size={4} textColor="#FFF">
              aFile.js - localized
            </Heading>
            <CodePane
              lang="jsx"
              source={require("raw!../assets/aFileAfter.js")}
              margin="20px auto"
              textSize="14px"
            />

          </Slide>

          {/* JS TRANSLATION - AFTER WITH TRANSLATIONS FILE */}
          <Slide transition={[]} bgColor="primary">
            <Heading size={4} textColor="#FFF">
              aFile.js - localized
            </Heading>
            <CodePane
              lang="jsx"
              source={require("raw!../assets/aFileAfter.js")}
              margin="20px auto"
              textSize="14px"
            />
            <Heading size={4} textColor="#FFF">
              Translations.php
            </Heading>
            <CodePane
              lang="jsx"
              source={require("raw!../assets/translations_js.php")}
              margin="20px auto"
              textSize="14px"
            />
          </Slide>

          {/* MUSTACHE TRANSLATION - BEFORE */}
          <Slide transition={[]} bgColor="primary">
            <Heading size={4} textColor="#FFF">
              aFile.mustache - not localized
            </Heading>
            <CodePane
              lang="jsx"
              source={require("raw!../assets/aFileBefore.mustache")}
              margin="20px auto"
              textSize="14px"
            />
          </Slide>

          {/* MUSTACHE TRANSLATION - AFTER */}
          <Slide transition={[]} bgColor="primary">
            <Heading size={4} textColor="#FFF">
              aFile.mustache - localized
            </Heading>
            <CodePane
              lang="jsx"
              source={require("raw!../assets/aFileAfter.mustache")}
              margin="20px auto"
              textSize="14px"
            />
          </Slide>

          {/* MUSTACHE TRANSLATION - AFTER - WITH TRANSLATIONS FILE */}
          <Slide transition={[]} bgColor="primary">
            <Heading size={4} textColor="#FFF">
              aFile.mustache - localized
            </Heading>
            <CodePane
              lang="jsx"
              source={require("raw!../assets/aFileAfter.mustache")}
              margin="20px auto"
              textSize="14px"
            />
            <CodePane
              lang="jsx"
              source={require("raw!../assets/translations_mustache.php")}
              margin="20px auto"
              textSize="14px"
            />
          </Slide>

          {/* ALF */}
          <Slide transition={["slide", "spin"]} bgColor="primary">
            <Heading caps fit size={1} textColor="tertiary">
              ALF
            </Heading>
            <Heading caps fit size={1} textColor="secondary">
              Adobe Language Framework
            </Heading>
          </Slide>
          <Slide transition={["fade"]} bgColor="secondary" textColor="primary">
            <List>
              <Appear><ListItem>We just have to specify what to translate and they do it</ListItem></Appear>
            </List>
          </Slide>

          {/* THE HARVEST CHRON */}
          <Slide transition={["slide", "spin"]} bgColor="primary">
            <Heading caps fit size={1} textColor="tertiary">
              The Harvest
            </Heading>
            <Heading caps fit size={1} textColor="secondary">
              CHRON
            </Heading>
          </Slide>
          <Slide transition={["fade"]} bgColor="secondary" textColor="primary">
            <List>
              <Appear><ListItem>runs multiple times a day</ListItem></Appear>
              <Appear><ListItem>checks for new uses of the translation function</ListItem></Appear>
              <Appear><ListItem>checks for diffs in text to translate</ListItem></Appear>
              <Appear><ListItem>After translations are made, ALF submits a PR with the new translations</ListItem></Appear>
            </List>
          </Slide>

          {/* GENERAL LOCALIZATION TIPS */}
          <Slide transition={["slide", "spin"]} bgColor="primary">
            <Heading caps fit size={1} textColor="tertiary">
              General
            </Heading>
            <Heading caps fit size={1} textColor="secondary">
              Localization Tips
            </Heading>
          </Slide>

          <Slide transition={["fade"]} bgColor="secondary" textColor="primary">
            <List>
              <Appear><ListItem>Translate any text that might be displayed to the user</ListItem></Appear>
              <Appear><ListItem>Don't concatenate strings</ListItem></Appear>
              <Appear><ListItem>Don't put punctuation outside of the translation</ListItem></Appear>
              <Appear><ListItem>Keep as much of a sentence or phrase inside the translation as possible</ListItem></Appear>
              <Appear><ListItem>Design text areas with room to expand for longer translations</ListItem></Appear>
              <Appear><ListItem>Don't hard-code date or time formats - use generic formats in moment.js</ListItem></Appear>
            </List>
          </Slide>

        </Deck>
      </Spectacle>
    );
  }
}
<|endoftext|>


<commit_before>// Import React
import React from "react";

// Import Spectacle Core tags
import {
  Appear, BlockQuote, Cite, Deck, Heading, Layout, Fill, ListItem, List, Quote, Slide,
  Text, Table, TableHeaderItem, TableItem, TableRow
} from "spectacle";

import FontAwesome from 'react-fontawesome';

import Caseify from './Components/Caseify.jsx';

// Import image preloader util
import preloader from "spectacle/lib/utils/preloader";

// Import theme
import createTheme from "spectacle/lib/themes/default";

// Require CSS
require("normalize.css");
require("spectacle/lib/themes/default/index.css");

const images = {
  city: require("../assets/city.jpg"),
  kat: require("../assets/kat.png"),
  logo: require("../assets/formidable-logo.svg"),
  markdown: require("../assets/markdown.png"),
  yo: require("../assets/foto_presentacion.jpg")
};

preloader(images);

const theme = createTheme({
  primary: "white",
  secondary: "#1F2022",
  tertiary: "#03A9FC",
  quartenary: "#CECECE"
}, {
  primary: "Montserrat",
  secondary: "Helvetica"
});

export default class Presentation extends React.Component {
  render() {
    return (
      <Deck transition={["slide"]} transitionDuration={500} theme={theme}>
        <Slide bgColor="primary">
					<Heading size={1} fit lineHeight={1} textColor="secondary">RESTful APIs</Heading>
					<Text margin="10px 0 0" textColor="tertiary" size={6} bold>Buenas prácticas</Text>
				</Slide>

        <Slide bgColor="black">
					<Heading size={1} caps fit textColor="primary" textFont="primary">Quién soy?</Heading>
          <List textColor="primary">
					  <Appear><ListItem textColor="primary">Juan Manuel Cruz</ListItem></Appear>
            <Appear><ListItem textColor="primary">Estudiante</ListItem></Appear>
            <Appear><ListItem textColor="primary">Desarrollador</ListItem></Appear>
            <Appear><ListItem textColor="primary">Autodidacta</ListItem></Appear>
            <Appear><ListItem textColor="primary">Hacker</ListItem></Appear>
					</List>
					<Appear><Text textColor="tertiary"><FontAwesome name="twitter" size="lg"/> wroughtbywind</Text></Appear>
          <Appear><Text textColor="primary"><FontAwesome name="github" size="lg"/> Malows</Text></Appear>
				</Slide>

        <Slide bgColor="primary">
          <Heading size={3} fit lineHeight={1} textColor="secondary">¿Por qué usar APIs RESTful?</Heading>
          <List>
            <Appear><Text margin="30px 10px" textColor="tertiary" size={6}>Proque son geniales</Text></Appear>
            <Appear><Text margin="30px 10px" textColor="tertiary" size={6}>
              {"Porque la carga de transferencia en aplicaciones web isomorfas se hace solo al principio. Luego de la carga inicial solo se transfieren datos"}
            </Text></Appear>
          </List>
        </Slide>

        <Slide>
          <Heading size={1} lineHeight={1} textColor="secondary">{"???"}</Heading>
        </Slide>

        <Slide>
          <Heading size={3} lineHeight={1} textColor="secondary">{"¿Qué son?"}</Heading>

            <Quote textSize={36} lineHeight={1} textColor="secondary">
              Un conjunto de protocolos y estándares que sirven para intercambiar datos entre aplicaciones
            </Quote>

              Wikipedia

          <Appear>
            <Text size={6}>Es una aplicación que se encarga de brindar información o otras aplicaciones</Text>
          </Appear>
        </Slide>

        <Slide>
          <Heading size={3} lineHeight={2} textColor="secondary">¿Qué tiene de bueno?</Heading>
          <Appear>
            <Text size={6}>
              Me permite acceder a datos de los cuales puedo o no ser dueño y
              consumirlos con aplicaciones de manera sencilla
            </Text>
          </Appear>
          <Appear><Text size={6} margin="1em 0">Por ejemplo</Text></Appear>
          <Appear>
            <List>
              <ListItem>El precio de divisas extranjeras</ListItem>
              <ListItem>Datos climatológicos</ListItem>
              <ListItem>Información de perfiles públicos</ListItem>
              <ListItem>Datos estatales públicos</ListItem>
            </List>
          </Appear>
        </Slide>

        <Slide>
          <Heading size={1}>FIN</Heading>
        </Slide>
      </Deck>
    );
  }
}
<commit_msg>Diapo 7 Que mas tienen de bueno<commit_after>// Import React
import React from "react";

// Import Spectacle Core tags
import {
  Appear, BlockQuote, Cite, Deck, Heading, Layout, Fill, ListItem, List, Quote, Slide,
  Text, Table, TableHeaderItem, TableItem, TableRow
} from "spectacle";

import FontAwesome from 'react-fontawesome';

import Caseify from './Components/Caseify.jsx';

// Import image preloader util
import preloader from "spectacle/lib/utils/preloader";

// Import theme
import createTheme from "spectacle/lib/themes/default";

// Require CSS
require("normalize.css");
require("spectacle/lib/themes/default/index.css");

const images = {
  city: require("../assets/city.jpg"),
  kat: require("../assets/kat.png"),
  logo: require("../assets/formidable-logo.svg"),
  markdown: require("../assets/markdown.png"),
  yo: require("../assets/foto_presentacion.jpg")
};

preloader(images);

const theme = createTheme({
  primary: "white",
  secondary: "#1F2022",
  tertiary: "#03A9FC",
  quartenary: "#CECECE"
}, {
  primary: "Montserrat",
  secondary: "Helvetica"
});

export default class Presentation extends React.Component {
  render() {
    return (
      <Deck transition={["slide"]} transitionDuration={500} theme={theme}>
        <Slide bgColor="primary">
					<Heading size={1} fit lineHeight={1} textColor="secondary">RESTful APIs</Heading>
					<Text margin="10px 0 0" textColor="tertiary" size={6} bold>Buenas prácticas</Text>
				</Slide>

        <Slide bgColor="black">
					<Heading size={1} caps fit textColor="primary" textFont="primary">Quién soy?</Heading>
          <List textColor="primary">
					  <Appear><ListItem textColor="primary">Juan Manuel Cruz</ListItem></Appear>
            <Appear><ListItem textColor="primary">Estudiante</ListItem></Appear>
            <Appear><ListItem textColor="primary">Desarrollador</ListItem></Appear>
            <Appear><ListItem textColor="primary">Autodidacta</ListItem></Appear>
            <Appear><ListItem textColor="primary">Hacker</ListItem></Appear>
					</List>
					<Appear><Text textColor="tertiary"><FontAwesome name="twitter" size="lg"/> wroughtbywind</Text></Appear>
          <Appear><Text textColor="primary"><FontAwesome name="github" size="lg"/> Malows</Text></Appear>
				</Slide>

        <Slide bgColor="primary">
          <Heading size={3} fit lineHeight={1} textColor="secondary">¿Por qué usar APIs RESTful?</Heading>
          <List>
            <Appear><Text margin="30px 10px" textColor="tertiary" size={6}>Proque son geniales</Text></Appear>
            <Appear><Text margin="30px 10px" textColor="tertiary" size={6}>
              {"Porque la carga de transferencia en aplicaciones web isomorfas se hace solo al principio. Luego de la carga inicial solo se transfieren datos"}
            </Text></Appear>
          </List>
        </Slide>

        <Slide>
          <Heading size={1} lineHeight={1} textColor="secondary">{"???"}</Heading>
        </Slide>

        <Slide>
          <Heading size={3} lineHeight={1} textColor="secondary">{"¿Qué son?"}</Heading>

            <Quote textSize={36} lineHeight={1} textColor="secondary">
              Un conjunto de protocolos y estándares que sirven para intercambiar datos entre aplicaciones
            </Quote>

              Wikipedia

          <Appear>
            <Text size={6}>Es una aplicación que se encarga de brindar información o otras aplicaciones</Text>
          </Appear>
        </Slide>

        <Slide>
          <Heading size={3} lineHeight={2} textColor="secondary">¿Qué tiene de bueno?</Heading>
          <Appear>
            <Text size={6}>
              Me permite acceder a datos de los cuales puedo o no ser dueño y
              consumirlos con aplicaciones de manera sencilla
            </Text>
          </Appear>
          <Appear><Text size={6} margin="1em 0">Por ejemplo</Text></Appear>
          <Appear>
            <List>
              <ListItem>El precio de divisas extranjeras</ListItem>
              <ListItem>Datos climatológicos</ListItem>
              <ListItem>Información de perfiles públicos</ListItem>
              <ListItem>Datos estatales públicos</ListItem>
            </List>
          </Appear>
        </Slide>

        <Slide>
          <Heading size={3} lineHeight={2} textColor="secondary">{"¿Qué más?"}</Heading>
          <Appear><Text size={6} margin="30px 0">Desacoplar dependecias estructurales y unificar la existencia de los datos</Text></Appear>
          <Appear>
            <Text size={6} margin="30px 0" textColor="tertiary" bold>
              Puedo tener todos los datos en una sola API, y tener una app web, una mobile y una de escritorio.
              Y que todas las aplicaciones usen los datos de la API, sin tener que tenerlos almacenados en
              lugares diferentes, repetidos o preocuparme de su sincronización
            </Text>
          </Appear>
        </Slide>

        <Slide>
          <Heading size={1}>FIN</Heading>
        </Slide>
      </Deck>
    );
  }
}
<|endoftext|>


<commit_before>'use strict';

var tap = require('tap');
var pz = require('promzard');
var spawn = require('child_process').spawn;
var utils = require('./../util/utils');
var path = require('path');
var helpers = require('./../util/helpers');

var node = process.execPath;
var output = '';
function respond(c, lastOutput, custom) {
    custom = custom || function () {
        c.stdin.write('\n');
    };
    var regex = new RegExp(lastOutput + ' $');
    if (output.match(regex)) {
        c.stdin.write('\n');
        c.stdin.end();
        return;
    }

    custom(c, output);
    return;
}

function spawnProcess(t, process, expect, lastAttributeOutput, custom) {
    var c = spawn(node, [process], { customFds: [-1, -1, -1] });
    output = '';
    c.stdout.on('data', function (d) {
        output += d;
        respond(c, lastAttributeOutput, custom);
    });

    var actual = '';
    c.stderr.on('data', function (d) {
        actual += d;
    });

    c.on('close', function () {
//        console.error('actual', actual);
//        console.error('expect', expect);
        actual = JSON.parse(actual);
        t.deepEqual(actual, expect);
        t.end();
    });
}

tap.test('bikini', function (t) {

    var process = require.resolve('./../process/bikini.js');

    var expect = {
        'name': '',
        'description': '',
        'endpoint': '',
        'model': '',
        'idAttribute': ''
    };

    var lastAttributeOutput = 'Models ID Attribute:';

    //console.error('%s %s', node, process);
    spawnProcess(t, process, expect, lastAttributeOutput);
});

tap.test('connectionconfiguration', function (t) {

    var process = require.resolve('./../process/connectionconfiguration.js');

    var expect = {
        'name': '',
        'description': '',
        'configurationId': '',
        'configurationDescription': '',
        'authentication': '',
        'client': '',
        'user': '',
        'alias': '',
        'password': '',
        'language': '',
        'sapCookie': '',
        'x.509Certificate': '',
        'externalIdData': '',
        'externalIdType': '',
        'applicationServer': '',
        'systemNumber': '',
        'messageServer': '',
        'messagePort': '',
        'systemId': '',
        'logonGroup': '',
        'gatewayServer': '',
        'gatewayPort': '',
        'sapRouterString': '',
        'logonCheck': '',
        'logonCodepage': '',
        'logonCodepageType': '',
        'tableParameterDeltaMngmt': '',
        'getSsoTicket': '',
        'denyInitialPwds': '',
        'activeConnections': '',
        'idleConnections': '',
        'expirationTimeout': '',
        'expirationPeriod': '',
        'queuedTimeout': '',
        'sncMode': '',
        'sncPartner': '',
        'sncLevel': '',
        'sncName': '',
        'sncLibrary': '',
        'sncSso': '',
        'repositoryDestination': '',
        'repositoryUser': '',
        'repositoryPassword': '',
        'repositorySncMode': '',
        'repositoryRoundtripOptimization': '',
        'properties': {
            'key': {
                'type': 'type',
                'value': 'value'
            },
            'key1': {
                'type': 'type1',
                'value': 'value1'
            }
        },
        'factoryPid': '',
        'bundleLocation': ''
    };

    var lastAttributeOutput = 'Bundle Location:';

    //console.error('%s %s', node, process);
    spawnProcess(t, process, expect, lastAttributeOutput, function (c, output) {
        if (output.match(/Properties \(key:type:value key:type:value\): $/)) {
            c.stdin.write('key:type:value key1:type1:value1\n');
            return;
        }
        c.stdin.write('\n');
    });
});

tap.test('model', function (t) {

    var process = require.resolve('./../process/model.js');

    var expect = {
        'name': 'book',
        'label': 'book',
        'attributes': {
            'author': {
                'type': 'string',
                'mandatory': false,
                'key': false
            },
            'isbn': {
                'type': 'integer',
                'mandatory': true,
                'key': false
            }
        }
    };

    var lastAttributeOutput = 'Models ID Attribute:';

    //console.error('%s %s', node, process);
    spawnProcess(t, process, expect, lastAttributeOutput, function (c, output) {
        if (output.match(/Name: $/)) {
            c.stdin.write('book\n');
            return;
        }
        if (output.match(/Attributes \(name:type:mandatory:key name:type:mandatory:key\): $/)) {
            c.stdin.write('author:string isbn:integer:true:key\n');
            c.stdin.end();
            return;
        }
        c.stdin.write('\n');
    });
});

tap.test('rest', function (t) {

    var process = require.resolve('./../process/rest.js');

    var expect = {
        name: '',
        description: '',
        connectorProvider: 'HTTP',
        protocol: 'com.mwaysolutions.mcap.connector.http.RestConnectionConfig',
        properties: {
            descriptorUrl: '',
            userName: '',
            password: ''
        }
    };

    var lastAttributeOutput = 'Password:';

    //console.error('%s %s', node, process);
    spawnProcess(t, process, expect, lastAttributeOutput);
});

tap.test('saprfc', function (t) {

    var process = require.resolve('./../process/saprfc.js');

    var expect = {
        'name': '',
        'description': '',
        'connector': '',
        'protocol': '',
        'properties': {
            'authentication': '',
            'client': '',
            'user': '',
            'alias': '',
            'password': '',
            'language': '',
            'sapCookie': '',
            'x.509Certificate': '',
            'externalIdDate': '',
            'externalIdType': '',
            'programServer': '',
            'programId': '',
            'rfcTrace': '',
            'cpicTrace': '',
            'repositoryDestination': '',
            'repositoryUser': '',
            'repositoryPassword': '',
            'repositorySncMode': '',
            'repositoryRoundtripOptimization': ''
        }
    };

    var lastAttributeOutput = 'Repository Roundtrip Optimization:';

    //console.error('%s %s', node, process);
    spawnProcess(t, process, expect, lastAttributeOutput);
});

tap.test('soap', function (t) {

    var process = require.resolve('./../process/soap.js');

    var expect = {
        'name': '',
        'description': '',
        'connector': '',
        'protocol': '',
        'properties': {
            'descriptorUrl': '',
            'userName': '',
            'password': '',
            'messageSuffix': '',
            'soapVersion': '',
            'adressingFeautre': '',
            'mtomFeature': '',
            'oauthProviderType': ''
        }
    };

    var lastAttributeOutput = 'OAuth Provider Type:';

    //console.error('%s %s', node, process);
    spawnProcess(t, process, expect, lastAttributeOutput);
});

tap.test('sql', function (t) {

    var process = require.resolve('./../process/sql.js');

    var expect = {
        'name': '',
        'description': '',
        'connector': '',
        'protocol': '',
        'properties': {
            'schema': ''
        }
    };

    var lastAttributeOutput = 'Schema:';

    //console.error('%s %s', node, process);
    spawnProcess(t, process, expect, lastAttributeOutput);
});

tap.test('calling mcap generate should throw an error if you\'re not in a mcap-project', function (t) {
    utils.executeCommand('../../cli.js', ['generate', 'model'], false, function (output, tmpPath) {
        t.equal(output.toString(), 'Not inside a mCAP Project\n');

        utils.executeCommand('../../cli.js', ['generate', 'bikini'], false, function (output, tmpPath) {
            t.equal(output.toString(), 'Not inside a mCAP Project\n');

            utils.executeCommand('../../cli.js', ['generate', 'connectionconfiguration'], false, function (output, tmpPath) {
                t.equal(output.toString(), 'Not inside a mCAP Project\n');

                utils.executeCommand('../../cli.js', ['generate', 'rest'], false, function (output, tmpPath) {
                    t.equal(output.toString(), 'Not inside a mCAP Project\n');

                    utils.executeCommand('../../cli.js', ['generate', 'saprfc'], false, function (output, tmpPath) {
                        t.equal(output.toString(), 'Not inside a mCAP Project\n');

                        utils.executeCommand('../../cli.js', ['generate', 'soap'], false, function (output, tmpPath) {
                            t.equal(output.toString(), 'Not inside a mCAP Project\n');

                            utils.executeCommand('../../cli.js', ['generate', 'sql'], false, function (output, tmpPath) {
                                t.equal(output.toString(), 'Not inside a mCAP Project\n');
                                t.end();
                            });
                        });
                    });
                });
            });
        });
    });

});

tap.test('calling mcap generate without any argument', function (t) {
    utils.executeCommand('../../cli.js', ['generate'], false, function (output, tmpPath) {
        t.equal(output.toString(), '\n');
        t.end();
    });
});

tap.test('calling mcap generate bikini', function (t) {
    utils.executeCommand('../../cli.js', ['new', 'test'], false, function (output, tmpPath) {
        // get the absolute path to the mcap project
        var mcapProjectPath = path.resolve('test');

        utils.executeCommand('../../cli.js', ['generate', 'bikini'], false, function (output, tmpPath) {
            t.equal(output.toString(), 'Name: ');
            t.end();
            process.chdir('..');
            //utils.removeTmpDir();
        }, mcapProjectPath, true);
    });
});

tap.test('WTF', function (t) {
    // Not sure why i need to do this?!
    // Without exiting manually, the previous test would never fail
    // no matter what i check

    process.exit(0);
});
<commit_msg>update test to last commit<commit_after>'use strict';

var tap = require('tap');
var pz = require('promzard');
var spawn = require('child_process').spawn;
var utils = require('./../util/utils');
var path = require('path');
var helpers = require('./../util/helpers');

var node = process.execPath;
var output = '';
function respond(c, lastOutput, custom) {
    custom = custom || function () {
        c.stdin.write('\n');
    };
    var regex = new RegExp(lastOutput + ' $');
    if (output.match(regex)) {
        c.stdin.write('\n');
        c.stdin.end();
        return;
    }

    custom(c, output);
    return;
}

function spawnProcess(t, process, expect, lastAttributeOutput, custom) {
    var c = spawn(node, [process], { customFds: [-1, -1, -1] });
    output = '';
    c.stdout.on('data', function (d) {
        output += d;
        respond(c, lastAttributeOutput, custom);
    });

    var actual = '';
    c.stderr.on('data', function (d) {
        actual += d;
    });

    c.on('close', function () {
//        console.error('actual', actual);
//        console.error('expect', expect);
        actual = JSON.parse(actual);
        t.deepEqual(actual, expect);
        t.end();
    });
}

tap.test('bikini', function (t) {

    var process = require.resolve('./../process/bikini.js');

    var expect = {
        'name': '',
        'description': '',
        'endpoint': '',
        'model': '',
        'idAttribute': ''
    };

    var lastAttributeOutput = 'Models ID Attribute:';

    //console.error('%s %s', node, process);
    spawnProcess(t, process, expect, lastAttributeOutput);
});

tap.test('connectionconfiguration', function (t) {

    var process = require.resolve('./../process/connectionconfiguration.js');

    var expect = {
        'name': '',
        'description': '',
        'configurationId': '',
        'configurationDescription': '',
        'authentication': '',
        'client': '',
        'user': '',
        'alias': '',
        'password': '',
        'language': '',
        'sapCookie': '',
        'x.509Certificate': '',
        'externalIdData': '',
        'externalIdType': '',
        'applicationServer': '',
        'systemNumber': '',
        'messageServer': '',
        'messagePort': '',
        'systemId': '',
        'logonGroup': '',
        'gatewayServer': '',
        'gatewayPort': '',
        'sapRouterString': '',
        'logonCheck': '',
        'logonCodepage': '',
        'logonCodepageType': '',
        'tableParameterDeltaMngmt': '',
        'getSsoTicket': '',
        'denyInitialPwds': '',
        'activeConnections': '',
        'idleConnections': '',
        'expirationTimeout': '',
        'expirationPeriod': '',
        'queuedTimeout': '',
        'sncMode': '',
        'sncPartner': '',
        'sncLevel': '',
        'sncName': '',
        'sncLibrary': '',
        'sncSso': '',
        'repositoryDestination': '',
        'repositoryUser': '',
        'repositoryPassword': '',
        'repositorySncMode': '',
        'repositoryRoundtripOptimization': '',
        'properties': {
            'key': {
                'type': 'type',
                'value': 'value'
            },
            'key1': {
                'type': 'type1',
                'value': 'value1'
            }
        },
        'factoryPid': '',
        'bundleLocation': ''
    };

    var lastAttributeOutput = 'Bundle Location:';

    //console.error('%s %s', node, process);
    spawnProcess(t, process, expect, lastAttributeOutput, function (c, output) {
        if (output.match(/Properties \(key:type:value key:type:value\): $/)) {
            c.stdin.write('key:type:value key1:type1:value1\n');
            return;
        }
        c.stdin.write('\n');
    });
});

tap.test('model', function (t) {

    var process = require.resolve('./../process/model.js');

    var expect = {
        'name': 'book',
        'label': 'book',
        'attributes': {
            'author': {
                'type': 'string',
                'mandatory': false,
                'key': false
            },
            'isbn': {
                'type': 'integer',
                'mandatory': true,
                'key': false
            }
        }
    };

    var lastAttributeOutput = 'Models ID Attribute:';

    //console.error('%s %s', node, process);
    spawnProcess(t, process, expect, lastAttributeOutput, function (c, output) {
        if (output.match(/Name: $/)) {
            c.stdin.write('book\n');
            return;
        }
        if (output.match(/Attributes \(name:type:mandatory:key name:type:mandatory:key\): $/)) {
            c.stdin.write('author:string isbn:integer:true:key\n');
            c.stdin.end();
            return;
        }
        c.stdin.write('\n');
    });
});

tap.test('rest', function (t) {

    var process = require.resolve('./../process/rest.js');

    var expect = {
        name: '',
        description: '',
//        connectorProvider: 'HTTP',
//        protocol: 'com.mwaysolutions.mcap.connector.http.RestConnectionConfig',
        type: 'rest',
        properties: {
            descriptorUrl: '',
            userName: '',
            password: ''
        }
    };

    var lastAttributeOutput = 'Password:';

    //console.error('%s %s', node, process);
    spawnProcess(t, process, expect, lastAttributeOutput);
});

tap.test('saprfc', function (t) {

    var process = require.resolve('./../process/saprfc.js');

    var expect = {
        'name': '',
        'description': '',
        'connector': '',
        'protocol': '',
        'properties': {
            'authentication': '',
            'client': '',
            'user': '',
            'alias': '',
            'password': '',
            'language': '',
            'sapCookie': '',
            'x.509Certificate': '',
            'externalIdDate': '',
            'externalIdType': '',
            'programServer': '',
            'programId': '',
            'rfcTrace': '',
            'cpicTrace': '',
            'repositoryDestination': '',
            'repositoryUser': '',
            'repositoryPassword': '',
            'repositorySncMode': '',
            'repositoryRoundtripOptimization': ''
        }
    };

    var lastAttributeOutput = 'Repository Roundtrip Optimization:';

    //console.error('%s %s', node, process);
    spawnProcess(t, process, expect, lastAttributeOutput);
});

tap.test('soap', function (t) {

    var process = require.resolve('./../process/soap.js');

    var expect = {
        'name': '',
        'description': '',
        'connector': '',
        'protocol': '',
        'properties': {
            'descriptorUrl': '',
            'userName': '',
            'password': '',
            'messageSuffix': '',
            'soapVersion': '',
            'adressingFeautre': '',
            'mtomFeature': '',
            'oauthProviderType': ''
        }
    };

    var lastAttributeOutput = 'OAuth Provider Type:';

    //console.error('%s %s', node, process);
    spawnProcess(t, process, expect, lastAttributeOutput);
});

tap.test('sql', function (t) {

    var process = require.resolve('./../process/sql.js');

    var expect = {
        'name': '',
        'description': '',
        'connector': '',
        'protocol': '',
        'properties': {
            'schema': ''
        }
    };

    var lastAttributeOutput = 'Schema:';

    //console.error('%s %s', node, process);
    spawnProcess(t, process, expect, lastAttributeOutput);
});

tap.test('calling mcap generate should throw an error if you\'re not in a mcap-project', function (t) {
    utils.executeCommand('../../cli.js', ['generate', 'model'], false, function (output, tmpPath) {
        t.equal(output.toString(), 'Not inside a mCAP Project\n');

        utils.executeCommand('../../cli.js', ['generate', 'bikini'], false, function (output, tmpPath) {
            t.equal(output.toString(), 'Not inside a mCAP Project\n');

            utils.executeCommand('../../cli.js', ['generate', 'connectionconfiguration'], false, function (output, tmpPath) {
                t.equal(output.toString(), 'Not inside a mCAP Project\n');

                utils.executeCommand('../../cli.js', ['generate', 'rest'], false, function (output, tmpPath) {
                    t.equal(output.toString(), 'Not inside a mCAP Project\n');

                    utils.executeCommand('../../cli.js', ['generate', 'saprfc'], false, function (output, tmpPath) {
                        t.equal(output.toString(), 'Not inside a mCAP Project\n');

                        utils.executeCommand('../../cli.js', ['generate', 'soap'], false, function (output, tmpPath) {
                            t.equal(output.toString(), 'Not inside a mCAP Project\n');

                            utils.executeCommand('../../cli.js', ['generate', 'sql'], false, function (output, tmpPath) {
                                t.equal(output.toString(), 'Not inside a mCAP Project\n');
                                t.end();
                            });
                        });
                    });
                });
            });
        });
    });

});

tap.test('calling mcap generate without any argument', function (t) {
    utils.executeCommand('../../cli.js', ['generate'], false, function (output, tmpPath) {
        t.equal(output.toString(), '\n');
        t.end();
    });
});

tap.test('calling mcap generate bikini', function (t) {
    utils.executeCommand('../../cli.js', ['new', 'test'], false, function (output, tmpPath) {
        // get the absolute path to the mcap project
        var mcapProjectPath = path.resolve('test');

        utils.executeCommand('../../cli.js', ['generate', 'bikini'], false, function (output, tmpPath) {
            t.equal(output.toString(), 'Name: ');
            t.end();
            process.chdir('..');
            //utils.removeTmpDir();
        }, mcapProjectPath, true);
    });
});

tap.test('WTF', function (t) {
    // Not sure why i need to do this?!
    // Without exiting manually, the previous test would never fail
    // no matter what i check

    process.exit(0);
});
<|endoftext|>