Filosofía y principios de diseño en React

2/19
Recursos

Aportes 20

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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

⚛ Filosofía y principios de diseño en React

Ideas/conceptos claves

Principios de diseño son los alineamientos, reglas o condiciones que sigue un equipo de desarrollo

Código aburrido se refiere al código fácil de reemplazar, mover y cambiar

Apuntes

  • React nos brinda principios el cual tiene el propósito de encaminarnos y coherentes con el cual React espera que escribiéramos

Framework o librería

  • Abstracciones comunes
    • React no desea incluir código demasiado específico el cual será para casos demasiados concretos, debido a que el mismo ya te los brinda
  • Interoperabilidad
    • React debe acoplarse a una aplicación sin necesidad de reescribir todo el código

Cambios al core

  • Estabilidad
    • React es consiente que es usado en empresas y lugares importantes, por ello los fundamentos se mantienen
    • En caso de haber alguna actualización fuerte, React da un tiempo para actualizarte
  • Válvulas de escape
    • Si React deja de usar algún patrón, el mismo avisará y mencionara alguna mejor alternativa
  • Experiencia de desarrollo
    • React tratará de encontrar soluciones las cuales como desarrolladores te sean simples de usar.
    • Usualmente tratan de brindarte una solución declarativa, en caso de no poderla realizar, dan una solución imperativa y en el peor de los casos brindan una solución que funcione

Prioridades

  • Implementación
    • Siempre que sea posible React dará un código elegante
    • Pero nunca pondrán el código elegante por encima del código aburrido
      • Al utilizar código elegante es más complicado de buscar formas de mejorar y escalar
  • Optimizado para instrumentación
    • React buscará el nombre más descriptivo para sus características
    • Un nombre descriptivo no necesariamente debe de ser un nombre largo, sino uno correcto el cual le dará sentido
  • Dogfooding
    • De alguna manera el equipo de React le dará prioridad a las necesidades de Facebook

👩‍💻 Filosofía React para ti

El trabajo de React

  • Planificación
    • React será el encargado de recibir las órdenes y realizarlas como la renderización, el manejo de estado o eventos
  • Configuración
    • React se asegura que siempre se tenga una compatibilidad con cualquier librería o aplicación que se utilice por lo cual la configuración del mismo no es algo que se te permita directamente como desarrollador

Tu trabajo

  • Depuración

    • React te dejará migajas de pan o rastros donde podrás encontrar errores de tu aplicación, como ser errores del lenguaje, framework o incluso lógica
    • Recuerda que un error es más

    🪜 Pasos para solucionar errores:

    1. Lee bien los errores de consola
    2. Lee varias veces el código relacionado con la parte que nos está funcionando correctamente
    3. Investiga
      1. Busca el error en Google
      2. ¿Investiga el porqué la solución funciona?
  • Composición

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

Composició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.

  • Nivel de siniorisidad.
    Me gusto esto.

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.

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.
.

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

otro curso con el mejor profesor de javaScript

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!

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.

Te das cuenta que el curso de Introduccion a React y este modulo son de verdad bastante buenos cuando en la misma documentacion de React te advierten que debes tener un entendimiento fuerte de la libreria para entender los principios de la misma, y aun asi la entiendes bastante bien. 💯😃

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.

Documentación oficial de React.js sobre Principios de diseño

Los errores son tus amigos

Juan David muy entretenidas tus clases, felicidades!

Principio de diseño de react

Framework o libreria

  • Abstracciones comunes: React no incluye código que sea demasiado especifico para casos de uso muy concretos. Pero cuando se trata de un caso de uso que nadie pueda resolver de forma optima, react toma cartas en el asunto.
  • Interoperabilidad: React se adapta bien con otras librerías para la creación de interfaz de usuario.

Cambios en el core

  • Estabilidad: Los patrones se mantienen estables entre versiones, y por lo menos nos darán tiempo para hacer el cambio.
  • Válvulas de escape: react avisa sobre los patrones que sera eliminados.
  • Experiencia de desarrollo: el objetivo de react no es solo resolver nuestro problemas, sino también darnos una buena experiencia de desarrollo al usarlo.

Prioridades

  • Implementación: siempre que sea posible, React escribirá código elegante, pero nunca sobre el código aburrido, para asegurar el cambio y no perpetuar el código presumible.
  • Optimizado para instrumentación: react invierte en los nombres correctos para cada cosa.
  • Dogfooding: cuando haya muchas cosas por hacer, priorizaran lo que necesite facebook.

Filosofia de react para nosotros

  • Planificación: tener claro que parte del trabajo es responsaibilidad de React y cual es la nuestra.
  • (NO) Configuración: es el cambio en el core.

Tu trabajo

  • Depuración: React nos da pistas para encontrar los errores lógicos entre nuestro código. Con la practica iremos desarrollando esa intuición para encontrarnos.
  • Composición: Eso sera la siguiente clase.

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