React v16.2.0: Improved Support for Fragments

React 16.2 is here:  - the biggest addition is support for

  • To make the authoring experience as convenient as possible, we’re adding syntactical support for fragments to JSX: – – In React, this desugars to a element, as in the example from the previous section.
  • Support for fragment syntax in JSX will vary depending on the tools you use to build your app.
  • Support for JSX fragments is available in Babel v7.0.0-beta.31 and above!
  • Upgrade to the latest TypeScript with the command: – – Flow support for JSX fragments is available starting in version 0.59!
  • A big thanks to everyone who filed issues, contributed to syntax discussions, reviewed pull requests, added support for JSX fragments in third party libraries, and more!

React 16.2 is now available! The biggest addition is improved support for returning multiple children from a component’s render method. We call this feature fragments:
Continue reading “React v16.2.0: Improved Support for Fragments”

Upgrading to Flow 0.53.0 and Beyond – William Candillon – Medium

Upgrading to Flow 0.53.0 and Beyond  #react #reactnative #flow #flowtype #reactjs #reactjs

  • How hard could it be?First Step: flow-upgradeReact support in flow v0.53.0 has dramatically improved and as described in this story, there is a utility tool that will automatically migrate your code base: flow-upgrade.
  • Before you do those, please take five to ten minutes to read the flow documentation about its support for React.
  • It was also required to migrate component properties defined using interface with type instead.Second Step: flow-result-checkerWhen running flow with version 0.53.0 and above, you will notice that a lot of node modules throw type errors.
  • For instance, they might be written using an older version of flow as the one you are using.
  • You are not responsible for these errors but you cannot simply ignore in your flow config file.Type errors you are not responsible forThere are two packages available that will filter flow errors from node_modules: flow-result-checker and flow-error-suppressor.

In the past twenty-four hours, my feelings towards flow went from frustration to love. And apparently, I wasn’t alone. If you are experiencing the same rollercoaster as we did, below are a few…
Continue reading “Upgrading to Flow 0.53.0 and Beyond – William Candillon – Medium”

Typescript or Flow – Product at Home

#Typescript or #Flow: What’s your type?  #ReactJS

  • If you spend your days making 100-line apps or scripting stuff in a console, maybe adding types is not the thing for you.But if you’re working on bigger apps or libraries, spending a couple of hours to set up and learn the basics of TS or Flow will bring you…
  • You end up with a more robust and reliable code base.What really matters for you as a developer is the final outputI see a lot of guides, sometimes really good ones, focussed on the structural and implementation differences between TS and Flow — TS is a language, Flow isn’t etc. — but these aren’t the…
  • Let’s see what warnings TS and Flow are giving me:Typescript error messageFlow error messageTypescript clearly gives us the solution to fix the problem, whereas Flow just flags a type incompatibility.Errors on missing propsFor me this one is the biggest issues with Flow: Instead of having the error in the Title / component like…
  • Better yet, I could avoid this problem altogether in TS by taking advantage of with Atom and VS Code are fine, but from personal experience, Typescript remains faster than Flow, especially on large projects.So it looks like Typescript is clearly the best choice, or is it?Setup:If you have an existing project…
  • You’ll still need your unit and e2e tests to be sure that your app is running as expected.Both Flow and Typescript are awesome ❤ and I’m really happy that both of these solutions exist.

tldr; You’re not a machine. You just can’t catch all bugs and know your (and your team’s) code by heart and it’s not your job. So add static types! Ok, let’s clarify something here. If you spend your…
Continue reading “Typescript or Flow – Product at Home”

Why we moved from Angular 2 to Vue.js (and why we didn’t choose React)

  • My conclusion about Angular 2 was simple, the only thing Angular 1 and 2 share in common is the name, they are completely different frameworks.So consider that we had 17 versions to upgrade on a non-tested system, a lot of pressure from the business to write new features, lots of bugs and poorly written code, the original developers weren’t on the team anymore, only one developer (me) at the time with many other responsibilities, Typescript, problems with finding the right documentation since I was using a beta, and Angular 2 moving to version 4.
  • I got a good understanding of the basic concepts of Vue.js, defined a good and extendable architecture but most importantly I really enjoyed the experience of writing code with it and I felt I was doing it faster that with React.React was a lot harder than I thought, choosing between Redux and MobX is more problematic than having one option that is well integrated with the framework like Vue.js and Vuex do.
  • React took the most mentions and Angular 2 came in a distant second place.I started to look for local talent with Vue.js experience and I did find some who were really good so I started to think that I was not alone, my social techy circle was probably too small and I shouldn’t play enough attention to the fact that I didn’t know anyone in person working with Vue.js on production.MobileAt the time we were thinking about Vue.js vs React, we were also considering rewriting our mobile app and React Native looked like a really good choice.
  • Twitter is another good example, they released Bootstrap under the very permissive MIT License and no one is talking about License problems with Bootstrap.Final wordsOut of the many web pages I researched before making a decision, one graph caught my attention, the developer satisfaction on The state of Javascript survey that Sacha Greif @sachagreif does every year.
  • You can read The State of Javascript on the following link.Overall, Vue.js was the the winner in our evaluation, it had many questions answered on Stack Overflow, the clearest official documentation of the three options, the smallest code base, integrates well with Bootstrap and learning that it was backed by strong projects like Laravel and a big company like Alibaba was a big plus.

At Rever (www.reverscore.com) we just released a new version of our web client using Vue.js. 641 commits and 16 weeks of intense development after with two resources, here we are, very proud of a…
Continue reading “Why we moved from Angular 2 to Vue.js (and why we didn’t choose React)”

Why we moved from Angular 2 to Vue.js (and why we didn’t choose React)

  • My conclusion about Angular 2 was simple, the only thing Angular 1 and 2 share in common is the name, they are completely different frameworks.So consider that we had 17 versions to upgrade on a non-tested system, a lot of pressure from the business to write new features, lots of bugs and poorly written code, the original developers weren’t on the team anymore, only one developer (me) at the time with many other responsibilities, Typescript, problems with finding the right documentation since I was using a beta, and Angular 2 moving to version 4.
  • I got a good understanding of the basic concepts of Vue.js, defined a good and extendable architecture but most importantly I really enjoyed the experience of writing code with it and I felt I was doing it faster that with React.React was a lot harder than I thought, choosing between Redux and MobX is more problematic than having one option that is well integrated with the framework like Vue.js and Vuex do.
  • React took the most mentions and Angular 2 came in a distant second place.I started to look for local talent with Vue.js experience and I did find some who were really good so I started to think that I was not alone, my social techy circle was probably too small and I shouldn’t play enough attention to the fact that I didn’t know anyone in person working with Vue.js on production.MobileAt the time we were thinking about Vue.js vs React, we were also considering rewriting our mobile app and React Native looked like a really good choice.
  • Twitter is another good example, they released Bootstrap under the very permissive MIT License and no one is talking about License problems with Bootstrap.Final wordsOut of the many web pages I researched before making a decision, one graph caught my attention, the developer satisfaction on The state of Javascript survey that Sacha Greif @sachagreif does every year.
  • You can read The State of Javascript on the following link.Overall, Vue.js was the the winner in our evaluation, it had many questions answered on Stack Overflow, the clearest official documentation of the three options, the smallest code base, integrates well with Bootstrap and learning that it was backed by strong projects like Laravel and a big company like Alibaba was a big plus.

At Rever (www.reverscore.com) we just released a new version of our web client using Vue.js. 641 commits and 16 weeks of intense development after with two resources, here we are, very proud of a…
Continue reading “Why we moved from Angular 2 to Vue.js (and why we didn’t choose React)”

Power of #TypeScript for #React part 3 is ready 🚀 Today looking at Actions #JavaScript…

  • Actions are a really helpful way to create separation between the different layers of an application, because they are not tightly coupled each layer can be built and tested in pieces.
  • It does bring it’s challenges however, whilst the code is loosely coupled, all areas of the code which interact with the action need to have the same expectation of it’s structure.
  • At Seccl all our actions follow the same basic structure and TypeScript allows us to define what that is by using an .
  • So now that we know the flavours, let’s look at an example of our action interface in the wild.
  • What we will create is an interface which describes the called and an action creator which builds the action.

Frontend leadership, Frontend architecture, HTML(5), JavaScript (OOJS, ES6, TypeScript), CSS (BEM, Less, SASS, Stylus), Testable Code (Mocha, Sinon, Chai, Karma), NodeJs (Express, Mongoose) , Cloud Applications (Heroku, S3, Azure)
Continue reading “Power of #TypeScript for #React part 3 is ready 🚀 Today looking at Actions #JavaScript…”

Why Angular 2 Is So Awesome – Jacob Gardner – Medium

Why Angular 2 Is So Awesome  #react #angular2 #angular #javascript #reactjs

  • First you start with a simple route that looks something like this:{ component: SweetComponent, path: ‘fabulousness/:someId’}Pretty straightforward, yeah?
  • Okay, time to dig down into that SweetComponent from earlier and see how it accesses those fields.Your route is polite enough to provide Observables so that the component can make any necessary updates when the route changes, like this:route.params.subscribe(({ someId }) = otherStuff }) = …Convenient, huh?
  • Simply put, it’s a hash of the names for component properties that have changed to corresponding SimpleChange objects.
  • On that note, I’ll just defer to a passage from my entirely hypothetical and nonexistent previous article, Why TypeScript Is So Awesome:Unfortunately, TypeScript’s philosophy tends to encourage a developer to encapsulate values in ES6 classes, much as one would use structs in other languages.
  • When we obfuscate the true nature of JavaScript’s dynamic typing and prototypal inheritance behind a facade of static types and classes, we directly harm inexperienced developers by giving them a false impression of how JavaScript actually works.

Did you want to know what’s so great about Angular 2? Man, that sure was rhetorical. I’m definitely going to tell you regardless. Let’s talk routing; every app worth its salt needs routing. First you…
Continue reading “Why Angular 2 Is So Awesome – Jacob Gardner – Medium”