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”

safe-nightwatch – Demo of SAFE-Stack applied to React Native for cross platform native mo…

  • This is a demo application for React Native development in F# using Fable and the SAFE stack.
  • SAFE is a technology stack that brings together several technologies into a single, coherent stack for typesafe, flexible end-to-end web-enabled applications that are written entirely in F#.
  • If you want to try it out then please do the following: – – Make sure that the FSharp compiler is properly installed on your operating system: – – This could look like: – – If you run and it compiles everything, but nothing happens… go to the packager output…
  • If the above does not work, and still nothing happens after it compiles everything, the licenses may need to be accepted on your computer.
  • To accept the licenses run the following commands for your platform – – On a Mac run the following – – On Windows run the following – – Re-run the build script and everything should work.

SAFE-Nightwatch – Demo of SAFE-Stack applied to React Native for cross platform native mobile apps
Continue reading “safe-nightwatch – Demo of SAFE-Stack applied to React Native for cross platform native mo…”

Things to like in @stenciljs: – Compiles to #WebComponents – #TypeScript by default – JSX familiar to #Reactjs devs

  • The extension is required since Stencil components are built using JSX and TypeScript.
  • Here is an example of what a Stencil component looks like:

    Once compiled, this component can be used in HTML just like any other tag.

  • This decorator provides metadata about our component to the Stencil compiler.
  • This decorator tells the compiler that the property is public to the component, and the user should be setting it.
  • If a user of our component were to change the element’s property, our component would fire it’s function again, updating the displayed content.

Stencil components are created by adding a new file with a .tsx extension, such as my-first-component.tsx, and placing them in the src/components directory.
The .tsx extension is required since Stencil components are built using JSX and TypeScript.
Continue reading “Things to like in @stenciljs:
– Compiles to #WebComponents
– #TypeScript by default
– JSX familiar to #Reactjs devs”

What is React – Trey Davis – Medium

What is React  #programming #javascript #react #reactjs

  • React breaks web elements down into re-usable components making it easy to manage complex web interfaces.React’s virtual DOM makes rendering updates fast and efficient.
  • The Virtual DOM is a JavaScript representation of the actual DOM.
  • When updates are made React compares the current DOM to the virtual DOM and only updates the differences between the two.React uses declarative JSX which is an HTML-style syntax inside of JavaScript.
  • React components can be reused and declared using JSX.
  • The Babel compiler converts JSX to JavaScript which renders the HTML view.React handles the majority of DOM rendering, so your index.html file begins as a simple div where React will append the DOM elements.Next we’ll walk through making a React component.

React is a fast, component-based, front-end JavaScript library. React typically runs in your browser and renders single-page web application user interfaces (and thanks to React-Native, mobile…
Continue reading “What is React – Trey Davis – Medium”

How to setup ReasonML for a React Native project – Tech Distillation

  • As there is no create-reason-react-native-app yet, we need to go through a manual process to setup Reason for app development with React Native (assuming you’re already familiar with React Native):Create React Native AppRather than trying to integrate Reason into an existing project I created a fresh React Native project using create-react-native-app and Expo:create-react-native-app AppWithReasoncd AppWithReasonObviously, as we are working with some libraries that are in an early stage of development you should put your project under version control with git, so you might want to start committing in git now and after each of the following steps.
  • We are going to use npm because it is used in the Reason docs but it should work with yarn as well.Add BuckleScript to the projectBuckleScript is a compiler with first level support for both OCaml and Reason which we need to add as a dependency to our project:npm install –save-dev bs-platform Once we are done with the setup, BuckleScript will automatically compile Reason code to JavaScript in the background for us, similar to Babel.Include ReasonReactThe React ecosystem is tightly integrated into React Native.
  • So, in order to have React features like JSX available in Reason on the same level of abstraction like we are used to in JavaScript, we are going to include Reason language bindings for React with ReasonReact:npm install –save-dev reason-reactProvide BuckleScript bindings for React NativeIn addition to React features provided by ReasonReact we want to be able to use React Native components and APIs.
  • Create the folder which will contain our Reason code:mkdir reAnd launch BuckleScript in watch mode:npm run watchThis will automatically compile our Reason code to JavaScript whenever a change occurs.
  • By the way, the BuckleScript compiler is very fast and won’t slow down the fast development experience we are used to with live reload in React Native.Now switch to your editor to add your first React Native component written in Reason:open ReactNative;let app () = View style=Style.

ReasonML has the potential to take JavaScript programming to the next level. Let’s setup a React Native project to start playing with Reason for app development.
Continue reading “How to setup ReasonML for a React Native project – Tech Distillation”

Reactjs vs Vuejs – What to Choose? #Vuejs #Reactjs #js

Reactjs vs Vuejs - What to Choose?
#Vuejs #Reactjs #js

  • Pros and cons of vue js
    Vue.js – is a JavaScript-framework that uses the MVVM pattern for creating user interfaces based on data models through reactive binding data.
  • A developer might not know how to use it but he should have heard about Vue js, because the framework became popular in past few years the number of use the words “Vue js” and “Vue.js” in Google trend in 2016 was more than in four times higher comparing to 2015.
  • Advantages of vue js:

    Having borrowed from older frameworks, such as Angular and React only the best, Vue.js stands the perfect balance between readability, maintainability of code and the pleasure of it, this code, writing.

  • From React Vue.js took a component approach, props, one-way data flow for the component hierarchy, performance, the ability to render on the backend and understanding the importance of proper state management.
  • This makes it easy to add the Vue library to the project, like jQuery.All this is possible in the React library, but generally the code written on React relies more on JSX and on the features of ES.

Both React.js and Vue.js have benefits and disadvantages, that may confuse a potential client at first. We’re going to make their comparison in this article.

Continue reading “Reactjs vs Vuejs – What to Choose?
#Vuejs #Reactjs #js”

Why React Native is the Best Choice for Making Native Apps

  • The React Native CLI lets you start a new native app project that will work on both iOS and Android.
  • One of my favorite features of React Native app development is live reload.
  • React Native builds upon React’s philosophy of “Learn once, write anywhere,” making it easy for React web developers to build native apps.
  • Composable unified UI codebases, instant app updates, and better development tooling make React Native the better way to make native apps.
  • And if you want to check out a great example of a React Native app for data visualization, Victory UI Explorer by Angela Nicholas is one of my favorite Formidable projects.

Composable unified UI codebases, instant app updates, and better development tooling make React Native the better way to make native apps.
Continue reading “Why React Native is the Best Choice for Making Native Apps”