Filosofía y principios de diseño en React

2/19
Recursos

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Aportes 12

Preguntas 1

Ordenar por:

Los principios de diseño en React:

  • Abstracciones comunes: se refiere que a React no quiere incluir código inútil en su core, código que sea demasiado especifico para caso de uso demasiado concreto. Sin embargo, existen excepciones.
  • Interoperabilidad: React trata de trabajar bien con otras bibliotecas de interfaz de usuario.
  • Estabilidad: React va a mantener sus apis, componentes, funcionamiento, etc… aunque estén descontinuados para no romper el código que usamos.
  • Válvulas de escape: Cuando React quiera descontinuar un patrón que no les gusta, es sus responsabilidad considerar todos los casos de uso existentes para él, y antes de descontinuarlo educar a la comunidad respecto a las alternativas.
  • Experiencia de desarrollo: el objetivo de React no es solo que con su código podamos solucionar nuestro problemas también van a buscar una solución que nos den una buena experiencia y disfrute.
  • Implementación: Siempre que sea posible React preferirá código aburrido a código elegante. El código es descartable y cambia a menudo. Así que es importante que no introduzca nuevas abstracciones internas al menos que sea absolutamente necesario. Código detallado que sea fácil de mover, cambiar y eliminar es preferido sobre código elegante que esté abstraído de manera prematura y que sea difícil de cambiar.
  • Optimizado para instrumentación: React siempre va a buscar el nombre mas distintivos y detallados(no necesariamente nombres largos).
  • Dogfooding: significa que React va a periodizar la implementación de funcionalidades que necesite su empresa, Facebook, Esto tiene la ventaja no solo para su empresa sino también a todos los desarrolladores que utiliza React.
  • Planificación: Acá es donde nosotros dividimos nuestras responsabilidades de los que debemos hacer y lo que tiene que hacer React por detrás con las descripciones que le hacemos.
  • Configuración: React cree que una configuración global no funciona bien con la composición. Dado que la composición es central en React, no proveen configuración global en el código. React siempre se asegurara que nosotros tengamos compatibilidad entre cualquier librería y aplicación que utilicemos React.
  • Depuración: se refiere que a React siempre va a dejarte pistas un rastro predecible, donde podamos buscar los errores en nuestra aplicación.
  • Composición: Next Class
    Documentación

Algo que me ha encantado de React es lo satisfactorio que es desarrollar, lo encuentro hasta divertido.

Dividir en componentes tu código lo hace más sencillo de modificar y escalar, así como evitar romper todo tu proyecto solo por un error.

Composición *

Recordando.

Programación imperativa y declarativa:

Los lenguajes de programación imperativa se distinguen de los lenguajes declarativos en un aspecto básico: la programación imperativa se centra en el “cómo”, y la declarativa, en el “qué”.
.

¿Qué queremos decir con esto? Los lenguajes de programación imperativa son como unas instrucciones paso a paso (cómo) redactadas para el ordenador. Describen de forma explícita qué pasos deben llevarse a cabo y en qué secuencia para alcanzar finalmente la solución deseada. En la programación declarativa, en cambio, se describe directamente el resultado final deseado (el qué). Pongamos un ejemplo culinario para entenderlo mejor: los lenguajes imperativos proporcionan la receta, mientras que los declarativos, fotos del plato preparado.
.
En los lenguajes declarativos, el código fuente permanece muy abstracto en relación al procedimiento concreto. Para llegar a la solución, se utiliza un algoritmo que encuentra y utiliza automáticamente los métodos adecuados. Este procedimiento tiene numerosas ventajas: de esta forma, los programas no solo se pueden escribir considerablemente más rápido, sino que las aplicaciones se pueden optimizar también de forma muy sencilla, ya que, si en el futuro se desarrolla un nuevo método, el algoritmo puede acceder fácilmente al método nuevo gracias a la aplicación abstracta del código fuente.
.

¡uff que alivio, no me van a despedir! , jajaja.
Muy buen clase JuanC … El curso promete mucho, vamos que vamos

Priorities

Boring code: easy to move and replace

  • Implementation:
    • Code as elegant as possible, but correct ugly implementation with good developer experience over elegant code.
    • Boring code over clever code, clever code for tweets while boring code to React, because code is always changing, so the priority is code :
      • Easy to move around, change and remove.
  • Optimized for Tooling:
    • Most descriptive names, not so long but pretty much descriptive
    • Optimizing for search
    • Distinct Verbose names
    • Especially for the features that should be used sparingly
      • dangerouslySetInnerHTML is hard to miss in a code review.
    • Example:
      • componentDidMount() instead of didMount() or onMount()
  • DogFooding:
    • When there are several things to do, they will prioritize the one they need the most on Facebook.
      This means:
    • React will not go away because of how important it is to Facebook, and they will invest the money needed to improve it.
    • The improvements that are made in React are oriented to real problems for the real developers that have them.

Otro lugar donde pueden encontrar temas interesantes con respecto a React es en Devto, varios artículos que explican diversos conceptos.

Igual en Discord se encuentra la comunidad de Reactiflux, personas de todo el mundo que como tu, aprenden React!

2.-Filosofía y principios de diseño en React

Los principios son las normas que sigue un equipo para desarrollar sus proyectos. En react tenemos los siguientes principios que nos permiten encaminarnos con el código que react espera que usemos.
.
Filosofía de React para el Team Facebook.

Framework o librería.

Se enfoca en ayudarnos a construir interfaces interactivas, de forma declarativa, con componentes reutilizables y en cualquier plataforma, es una librería más que nada.

  • Las abstracciones comunes: No quiere incluir código inútil en su core, que ya sea muy específico, para casos de uso muy concretos. Eso lo hacemos nosotros. La única razón por la que react agregaría una funcionalidad específica es cuando notan que muchas personas implementan una solución de manera horrible.
  • Interoperabilidad: Poder integrar react en nuestras apps incluso si ya usamos otras herramientas.

.
Cambios al core.

¿Cómo harán esos cambios?

  • Estabilidad: React es consciente de que muchas empresas y personas usan React. Por eso cuando actualizan mantienen su funcionamiento para no romper el código que ya se tenía antes. Esto no significa que React siempre será igual por eso el siguiente concepto.
  • Válvulas de escape: Si react decide descontinuar algo nos avisará de ello y que deberíamos migrar a una nueva forma de trabajar.
  • Experiencia de desarrollo: Que tengamos una buena experiencia de desarrollo. Tratan de brindarnos la solución.

.
Prioridades

Prioridades de React para el futuro

  • Implementación: Siempre que sea posible React tratará de escribir código muy elegante, pero nunca van a poner el código elegante por encima del código aburrido(que es fácil de cambiar o reemplazar). Si nos preocupamos siempre por la elegancia del código va a ser muy difícil que en el futuro encontremos mejores soluciones al código.
  • Optimizado para instrumentación: React siempre buscará el nombre más descriptivo cuando deba nombrar las propiedades de su API. No se trata de poner el nombre más largo.
  • Dogfooding: Cuando haya varias cosas por hacer, van a priorizar la que más necesite el código interno de Facebook.

.
Filosofía React para ti

El trabajo de React

  • Planificación: Tener en claro que parte del trabajo es responsabilidad de React y no de nosotros. Nosotros nos encargamos de darle la descripción, React de hacerlos funcionar.
  • Configuración: “De la no configuración”, muchas herramientas ofrecen una forma de configurar en tiempo de ejecución el funcionamiento interno de la herramienta para la app que hizo esa configuración modifica el comportamiento de la herramienta así ese no sea su comportamiento original. React no permite eso, prefiere asegurarnos que siempre tendremos compatibilidad entre cualquier librería o app que use react. Si queremos cambiar algún funcionamiento de react tenemos que clonar el código fuente y cambiar ahí lo que necesitemos.

.
Tu trabajo

  • Depuración: React siempre dejará un rastro predecible donde podamos buscar los errores de nuestra app. Nuestro trabajo es seguir ese camino para poder solucionar problemas.
  • Composición

Al momento de tener un acercamiento como frontend a un framework fue con Angular y vaya desastre hice… No comprendía lo importante que es la reutilización del código y de comprender los patrones o principios al momento de programar. React vino después de la tormenta y ahí empecé a interiorizar un poco esos principios, ver el por qué y disfrutar programar, incluso volví a angular por mi trabajo y con lo que aprendí de React se hizo mucho más ameno.

  • Nivel de siniorisidad.
    Me gusto esto.

React Design Principles

Principios de diseño - React

  • Common Abstractions:

    • React doesn’t add features that can be implemented by the users in efficient ways, so the developer’s app doesn’t have useless library code.
    • React does not want to include useless code in its core, code that is too specific for too concrete use case.
      However, there are exceptions.
    • React add features that many users implement in incompatible or inefficient ways.
      • Ex: React Context
    • There is a label (the “big picture” label) where the React team discuss with the community about that new features.
  • Interoperability:

    • Integration with existing systems
    • Facebook uses XHP, non-React code, UI libraries created by them before React existed, so they need the integration between the new features in React with the existing features. In other words, Facebook needs integration, so React has been designed to work with other non-react codebases.
  • Stability:

    • React will maintain its APIs, components, operation, etc… even if they are discontinued so as not to break the code we use.
    • Facebook has more than 50 thousand components using React also Twitter and Airbnb are heavy users of it. So, they take care of that when something changes in React there is a clear (and preferably automated) migration path
    • They study the impact of the changes and make codebases to the point they want to change, so the user could adapt.
    • They add warnings when they determine that some feature is deprecated and should be replaced by the user.
  • Escape Hatches:

    • React educates the community about alternatives or the new features when they will apply big changes, and they will consider all the existing use cases of the features they are improving or “replacing”.
  • Development Experience

    Change with Less Pain As Possible

    • They maintain React DevTools (that allows the developer to inspect the React component tree in her browser)
    • They provide Helpful developer warnings

    Developer warnings and the related checks are the main reason why the development version of React is slower than the production version.

React Philosophy for me

The work of react

  • Scheduling:

    Analysis of React source code: scheduling principle

    • React does not want to be fully “Reactive” because in some occasions the JavaScript tasks that the developer is creating could block the rendering engine and bring a bad user experience.
    • React keeps the ability to determine task priorities and sometimes delay them to improve the user experience, that’s scheduling (in that way, React is able to avoid dropping frames; giving priority to tasks related to user interactions over less important background work).
    • So is up to React to execute the tasks related to a component and WHEN to execute them.
  • Configuration:

    • There will always be compatibility, but you will not be able to configure react core
    • Global configuration is up to React because if a component or a project has a specific configuration would make integration harder.

Our work

  • Debugging:
    • Breadcrumbs are very important to trace mistakes to its source, in react props and state are those breadcrumbs
    1. Find an error.
    2. Open React DevTools.
    3. Find the component responsible for rendering.
    4. Check if the props and state are correct.
    5. If they are correct :
      1. You know the problem is in the component’s render function or some function that is called by render
      2. The problem is isolated.
    6. If the state is wrong :
      1. You know the problem is caused by one of the setState calls.
    7. If the props are wrong :
      1. You can traverse the tree up in the inspector, looking for the component that first “poisoned the well” by passing bad props down.
  • Debugging: troubleshooting errors
    1. Read the error well
    2. Read several times the files related to the error
    3. Search in google
    4. When you search for the error on Google, understand the explanations
    5. Make it worthwhile to have had the error