Introducción a C++

Gerson Garrido Manislla

Universidad Nacional de Ingeniería

Escuela de Ciencia de la Computación

Acerca de mí

• Senior UI Developer at PureCars, a digital marketing and automation company in the automotive space

• Moonlights as a consultant with his brother where they work with small businesses to create modern dashboard applications.

• Love ultimate frisbee and watching NFL

Joel Kanzelmeyer

C++

http://www.cplusplus.com/

C++

• Creado por Bjarne S. en 1983
• Multiparadigma, Orientado a objetos*
• Es un lenguaje potente

Empezemos!

/* Programa que nos muestra en consola Hola mundo!*/
// Esto también es un comentario 

#include <iostream>

int main()
{
    std::cout << "Hello World!";
    return 0;
}

Vamos a explicar linea a linea

/* Programa que nos muestra en consola Hola mundo!*/
// Esto también es un comentario 

Estos son comentarios es decir que no afectan el comportamiento del programa. Los programadores usan los comentarios para documentar el código.

#include <iostream>

Esta linea es una directivas leídas e interpretadas el preprocesador. Son líneas especiales interpretadas antes de que empiece la compilación del programa mismo. En este caso, la directiva #include <iostream>, permite realizar operaciones de entrada y salida estándar, como escribir la salida de este programa.

int main ()

La función llamada main() es una función especial en todos los programas C ++. Es la función llamada cuando se ejecuta el programa. La ejecución de todos los programas de C ++ comienza con la función principal.

continuación..

{ 
    ... 
}

std::cout << "Hello World!";

La llave abierta "{" indica el comienzo de la definición de la función principal, y la llave de cierre "}" , indica su final. Todas las funciones utilizan llaves para indicar el comienzo y el final de sus definiciones.

std::cout << "Hello World!";

Esta línea es una declaración de C ++. Una declaración es una expresión que realmente puede producir algún efecto.

Esta declaración tiene tres partes: Primero, std :: cout, que signfica standard character output (salida de caracteres estándar). En segundo lugar, el operador de inserción (<<), que indica que lo que sigue se inserta en std :: cout. Finalmente, una oración entre comillas ("¡Hola mundo!"), Es el contenido insertado en la salida estándar.

Observe que la sentencia termina con un punto y coma (;). Este carácter marca el final de la declaración. Todas las instrucciones de C ++ deben finalizar con un carácter punto y coma.

Fácil de entender

Ahora vamos a ejecutarlo

Easy to reason about

(RIP Gene Wilder)

Good separation of concerns

Your business logic is kept out of your views

Developer adoption

A community of great developers support Redux

Middleware

Enhance base functionality with custom middleware

React Boilerplate

www.reactboilerplate.com

The struggle is real

JS Tool Fatigue

React Boilerplate to the rescue!

• Most stable/production-ready solution I've found
• Follows good practices for large React apps
• Server-side rendering
• Code splitting (lazy load code when needed)
• Hot module reloading (excellent for debugging)
• ES6 support and CSS modules/PostCSS

React Boilerplate to the rescue!

Best Practice #1

Smart containers and dumb components

Redux at Scale

Dumb Components

(Presentational)

Dumb Component Example

const DumbComponent = (props) => {

  const { text, onChange } = props;
  
  return (
    <div>
      <p>Your text: {text}</p>
      <input value={text} onChange={onChange} />
    </div>
  );

};

Smart Containers

(Stateful)

Smart Container Example

//...
import { updateText } from '../actions';
//...

class SmartContainer extends React.Component {
  render() {
    const { text, updateText } = this.props;
    return (
      <DumbComponent text={text} onChange={updateText} />
    );
  }
}

const mapStateToProps = (state) => ({
  text: state.text
});

const mapDispatchToProps = (dispatch) => ({
  updateText: (evt) => dispatch(updateText(evt.target.text))
});

export default connect(mapStateToProps, mapDispatchToProps)(SmartContainer);

Benefits

• Better separation of concerns
• Better reusability
• A library of UI components

Best Practice #2

Immutability

Redux at Scale

Equality checking in Javascript

Why is this a problem?

Fine-tuning React Performance

shouldComponentUpdate

class NewsFeed extends React.Component {

  shouldComponentUpdate(nextProps) {
    return !_.isEqual(this.props.articles, nextProps.articles) ||
      !_.isEqual(this.props.user, nextProps.user);
  }

  render() {
    const { user, articles } = this.props;
    return (
      <div>
        <p>Hello, {user.firstName}! Here is your news for the day:</p>
        <div>
        {
          articles.map((article) => (
            <Article article=[article} />
          ))
        }
        </div>
      </div>
    );
  }

}

Immutable.js

facebook.github.io/immutable-js

shouldComponentUpdate with Immutable.js

  shouldComponentUpdate(nextProps) {
    return this.props.articles !== nextProps.articles ||
      this.props.user !== nextProps.user;
  }

Benefits

• Improves performance
• Simplifies shouldComponentUpdate
• Easier to reason about

Best Practice #3

Normalized state tree

Redux at Scale

API returns deeply nested objects

// API response
[
  {
    "id": 1,
    "title": "Why React is Awesome",
    "author": {
      "id": 1,
      "name": "Joel Kanzelmeyer"
    }
  },
  {
    "id": 2,
    "title": "Why Redux is Great",
    "author": {
      "id": 1,
      "name": "Joel Kanzelmeyer"
    }
  }
]

normalizr

github.com/paularmstrong/normalizr

Turns this...

// API response
[
  {
    "id": 1,
    "title": "Why React is Awesome",
    "author": {
      "id": 1,
      "name": "Joel Kanzelmeyer"
    }
  },
  {
    "id": 2,
    "title": "Why Redux is Great",
    "author": {
      "id": 1,
      "name": "Joel Kanzelmeyer"
    }
  }
]

Example with normalizr

redux-normalizr-middleware

github.com/wbinnssmith/redux-normalizr-middleware

Action/reducer example

Benefits

• Normalizes deeply nested objects
• Prevents duplicate state
• Normalization can happen in middleware

Problem #1

Asynchronous/chained actions

(actions with side-effects)

Redux at Scale

Example

// API service
const getBooks = () =>
  fetch('/api/books')
    .then(handleErrors)
    .then(parseJSON);

MVC

What We Really Need

// Actions

const getBooks = () => ({
  type: 'GET_BOOKS'
});

const getBooksSuccess = (books) => ({
  type: 'GET_BOOKS_SUCCESS',
  payload: books
});

const getBooksFailure = (error) => ({
  type: 'GET_BOOKS_FAILURE',
  payload: error
});

redux-thunk

Solution #1

github.com/gaearon/redux-thunk

Thunked Action

function incrementIfOdd() {
  return (dispatch, getState) => {
    const { counter } = getState();

    if (counter % 2 === 0) {
      return;
    }

    dispatch(increment());
  };
}

Example with redux-thunk

// Actions

// create a thunked action
const getBooks = () => {
  return (dispatch, getState) => {
    // check to see if books have already been fetched
    if (!getState().books) {
      // if not, dispatch the GET_BOOKS action
      dispatch({
        type: 'GET_BOOKS'
      });
      // then you make your http request
      booksApi.getBooks()
        .then((books) => {
          // dispatch success action
          dispatch(getBooksSuccess(books));
        })
        .catch((error) => {
          // dispatch failure action
          dispatch(getBooksFailure(error));
        });
    }
  };
};

const getBooksSuccess = (books) => ({
  type: 'GET_BOOKS_SUCCESS',
  payload: books
});

const getBooksFailure = (error) => ({
  type: 'GET_BOOKS_FAILURE',
  payload: error
});

redux-thunk

• Handle side-effects within your action creators
• Able to unit test, must mock redux store and http requests

redux-saga

Solution #2

github.com/yelouafi/redux-saga

(My preference, for what it's worth)

redux-saga

class UserComponent extends React.Component {
  ...
  onSomeButtonClicked() {
    const { userId, dispatch } = this.props
    dispatch({type: 'USER_FETCH_REQUESTED', payload: {userId}})
  }
  ...
}

Why I prefer redux-saga over redux-thunk

Easier to reason about

Why I prefer redux-saga over redux-thunk

Testing is simpler

Why I prefer redux-saga over redux-thunk

Highly de-coupled

• Your actions no longer contain business logic
• Business logic can be encapsulated in sagas
• Add new logic to existing actions by creating sagas

redux-saga

• Keeps your actions pure
• Handle side-effects in a "separate thread" with sagas
• Able to unit test without mocking surrounding environment

Problem #2

Selecting state, especially derived state, is painful and non-performant

Redux at Scale

Example

// SomeComponent.js
...
const mapStateToProps = (state) => {
  const books = state.books; // Immutable map
  const filterText = state.filterText;
  return {
    filteredBooks: books.filter((book) => {
      return book.name.includes(filterText);
    })
  };
};
...
export default connect(mapStateToProps)(SomeComponent);

Why is this a problem?

const mapStateToProps = (state) => {
  const books = state.books; // Immutable map
  const filterText = state.filterText;
  return {
    filteredBooks: books.filter((book) => {
      return book.name.includes(filterText);
    })
  };
};

• mapStateToProps is called on every state change
• Shallowly compares and re-renders only when changed
• Filtering, sorting, mapping, etc always returns new instance

reselect

Solution

github.com/reactjs/reselect

reselect

// selectors.js
import { createSelector } from 'reselect';

const booksSelector = (state) => state.books;
const filterTextSelector = (state) => state.filterText;

export const filteredBooksSelector = createSelector(
  booksSelector,
  filterTextSelector,
  (books, filterText) =>
    books.filter((book) => {
      return book.name.includes(filterText);
    })
);

reselect

• Better performance via memoized selectors
• Selectors are now composable
• Added benefit of encapsulating state selection logic

Problem #3

Too much boilerplate code and too reliant on string constants

Redux at Scale

redux-act

Solution

github.com/pauldijou/redux-act

createAction

Simpler, more consistent way to create redux action creators

const addTodo = createAction('Add todo');

addTodo('content');
// return {
//   type: '[1] Add todo',
//   payload: 'content'
// }

const editTodo = createAction(
  'Edit todo',
  (id, content) => ({id, content})
);

editTodo(42, 'the answer');
// return {
//   type: '[2] Edit todo',
//   payload: {
//     id: 42,
//     content: 'the answer'
//   }
// }

const serializeTodo = createAction('SERIALIZE_TODO');
serializeTodo(1);
// return { type: 'SERIALIZE_TODO', payload: 1 }

createReducer

Simpler, more consistent way to create redux reducers

const increment = createAction();
const add = createAction();


// First pattern
const reducerMap = createReducer({
  [increment]: (state) => state + 1,
  [add]: (state, payload) => state + payload
}, 0);


// Second pattern
const reducerFactory = createReducer(function (on, off) {
  on(increment, (state) => state + 1);
  on(add, (state, payload) => state + payload);
  // 'off' remove support for a specific action
}, 0);

redux-act

• Reduce boilerplate
• Use actions themselves as references rather than constants 
• Flux Standard Action compliant

Honorable Mentions

redux-actions

github.com/acdlite/redux-actions

Conclusion

• Utilize "smart containers" and "dumb components"
• Use Immutable data to help performance
• A normalized state tree helps avoid duplication
• Conquer side-effects with redux-thunk or redux-saga
• Create performant, composable selectors with reselect
• Use redux-act to reduce boilerplate and simplify

Links

• ReactJS - facebook.github.io/react
• Redux - redux.js.org
• react-boilerplate - www.reactboilerplate.com
• Immutable.js - facebook.github.io/immutable-js
• normalizr - github.com/paularmstrong/normalizr
• redux-thunk - github.com/gaearon/redux-thunk
• redux-saga - github.com/yelouafi/redux-saga
• reselect - github.com/reactjs/reselect
• redux-act - github.com/pauldijou/redux-act
• redux-actions - github.com/acdlite/redux-actions

Joel Kanzelmeyer

@kanzelm3

github.com/kanzelm3

Questions?