Understanding The React Source Code — Initial Rendering (Simple Component) I

  • var childrenLength = arguments.length — 2; if (childrenLength === 1) { props.children = children; // scr: one child is stored as object } else if (childrenLength 1) { var childArray = Array(childrenLength); for (var i = 0; i childrenLength; i++) { childArray[i] = arguments[i + 2]; // scr: multiple children…
  • …var ReactElement = function(type, key, ref, self, source, owner, props) { // This tag allow us to uniquely identify this as a React Element $$typeof: REACT_ELEMENT_TYPE,// Built-in properties that belong on the element type: // scr: ————– ‘h1’ key: // scr: ————– not of interest for now ref: // scr:…
  • The name TopLevelWrapper explains what it does — wrap the top level element (of the component tree passed through render()):An important definition here is that of TopLevelWrapper, I type three stars here *** for you to CTL-f, as you might need to come back to this definition later:…var TopLevelWrapper = function() {…
  • The only line that is effective before the logic processes to next step is… var nextWrappedElement = { child: nextElement, that it should be easy to see how the target object of this step is constructed with React.createElement, the function we just examined in the last a `ReactCompositeComponent` using `ReactElement[2]`The…
  • In our context, it checks the ReactElement[2]’s type (i.e., TopLevelWrapper) and creates a ReactCompositeComponent accordingly.function shouldHaveDebugID) { var instance;… } else if (typeof node === ‘object’) { var element = node; var type = element.type;… // Special case string values if (typeof element.type === ‘string’) {… } else if {……

UI updating, in its essential, is data change. React offers a straightforward and intuitive way to program front-end Apps as all the moving parts are converged in the form of states. Code review of…
Continue reading “Understanding The React Source Code — Initial Rendering (Simple Component) I”

TDD? Waste of time! – Reactive Conf

Doing TDD today is a waste of time in 99% of cases:  #ReactJS #JavaScript

  • Trying out your code with various inputs is the testing every single one of us is familiar with.Writing automatic tests is a waste of time in 99% of cases.Yes, automatic tests have following benefits in comparison with “testing by hand”:You write the test once and can run it million times.
  • If your code changes due to code review or refactoring, you can just re-run it.It can serve as a record for code review that you thought of all the corner cases.When making a new feature, they serve as proof you didn’t break the rest of the system.Tests come at a significant cost as TDD programmers spend as much as half of their time writing tests.That may be acceptable if we run the test a hundred times.
  • TDD encourages, however, writing mostly unit tests.Testing pyramidWhen we refactor the unit, we usually intentionally change its contract and tests fail as expected, which is useless.Failed tests are useful only if they fail unexpectedly.If we take the real cost of automatic testing into account, the well-known ice cream cone anti-pattern doesn’t look like an anti-pattern anymore.Ice cream cone anti-patternMost bugs are caused by wrong interaction between units rather than faulty units.
  • You can’t commit a manual test to a repo, you can’t easily verify it on a code review.Could we make writing tests as simple as testing manually?Cool things are happening in the testing field right now.
  • I hope he’s got some ideas how to finally make automatic tests cheap to write and maintain!Rogelio GuzmanIf you are as excited about Jest Snapshots as we are, snap up your ticket today!

Test-driven development is extremely costly. Yet, it is the religion of our profession, encouraged even when the benefit-cost ratio is low. Should we stop doing it? Can we make testing cheaper…
Continue reading “TDD? Waste of time! – Reactive Conf”

TDD? Waste of time! – ReactiveConf – Medium

TDD? Waste of time!  #javascript #react #testing #reactjs

  • Trying out your code with various inputs is the testing every single one of us is familiar with.Writing automatic tests is a waste of time in 99% of cases.Yes, automatic tests have following benefits in comparison with “testing by hand”:You write the test once and can run it million times.
  • If your code changes due to code review or refactoring, you can just re-run it.It can serve as a record for code review that you thought of all the corner cases.When making a new feature, they serve as proof you didn’t break the rest of the system.Tests come at a significant cost as TDD programmers spend as much as half of their time writing tests.That may be acceptable if we run the test a hundred times.
  • TDD encourages, however, writing mostly unit tests.Testing pyramidWhen we refactor the unit, we usually intentionally change its contract and tests fail as expected, which is useless.Failed tests are useful only if they fail unexpectedly.If we take the real cost of automatic testing into account, the well-known ice cream cone anti-pattern doesn’t look like an anti-pattern anymore.Ice cream cone anti-patternMost bugs are caused by wrong interaction between units rather than faulty units.
  • You can’t commit a manual test to a repo, you can’t easily verify it on a code review.Could we make writing tests as simple as testing manually?Cool things are happening in the testing field right now.
  • I hope he’s got some ideas how to finally make automatic tests cheap to write and maintain!Rogelio GuzmanIf you are as excited about Jest Snapshots as we are, snap up your ticket today!

Test-driven development is extremely costly. Yet, it is the religion of our profession, encouraged even when the benefit-cost ratio is low. Should we stop doing it? Can we make testing cheaper…
Continue reading “TDD? Waste of time! – ReactiveConf – Medium”