React.js Structures JavaScript for Easy Componentization

#ICYMI: React.js Structures JavaScript for Easy Componentization

  • JavaScript is in the midst of transforming development teams’ expectations for desktop, server and mobile apps.
  • Enhancements to JavaScript are enabling it to break free of the browser, while technologies such as Node.js and its package manager npm facilitate creation of portable front-end and back-end apps that rival those traditionally created for environments such as Windows, Linux and mobile devices.
  • Components encapsulate the necessary HTML, JavaScript and CSS for a particular component, and apps are built by composing components into larger components that encapsulate their own data and logic.
  • React and Facebook provide a number of recommendations and best practices to help developers build their apps, but developers ultimately shoulder the burden of building the app — creating or procuring the various components, designing the data architecture and testing plan, establishing the look and feel of the app, adapting to necessary display environments, and so forth.
  • Many of the ExtReact components leverage the data package to provide consistent buffering, sorting, filtering and pagination capabilities with minimal developer effort.

If you’re developing a sophisticated, data-driven app with React, you can take advantage of the React components offered by Sencha in ExtReact.
Continue reading “React.js Structures JavaScript for Easy Componentization”

How I organize my React & Redux projects – Bruno Quaresma – Medium

How I organize my React & Redux projects  #javascript #react #redux #reactjs

  • So, in order to reuse some domain logic like a Payment feature you will need to enter in every function folder and move the respective files and tests to a separeted folder to create a lib.
  • Problems solved… In parts…I think that the views(visual components/dumb components) are not part of the domain because the views are just a way to decorate some data to display to the user.
  • It’s the best part to use and reuse components.Then, I extracted the views from all domains folder and created a components folder in src directory.
  • Therefore, after some reflection, I decided to create a folder called modules and put all the logical domain inside.Another point that I think that is important to care about is the screens folder.
  • The answer to this is because the components folder is for reusable visual components(dumb components) as opposed to screens which are very coupled with the current application.The utils folder is used to keep some logic that can be extracted from the code but is not about the application domain, e.g. string/array operations.If you have a differente point of view, let me know.

In this post, I will share with you how I organize my React & Redux projects and talk about some decisions that I made while working in some projects in the last two years. This structure groups each…
Continue reading “How I organize my React & Redux projects – Bruno Quaresma – Medium”

Why Do Developers Now Compare Vue.js to JavaScript Giants Angular and React?

  • It was 2016 when Vue.js rose to fame and gained so much traction that it’s now seen as an alternative for even well established JavaScript libraries, such as Angular and React.
  • Since Angular belongs to search engine giant Google and React comes from social media behemoth Facebook, developers still trust and use those libraries more than Vue.js.
  • This blog attempts to shed light on why there is a growing belief among developers that Vue.js is set to become the top JavaScript library, leaving behind Angular and React.
  • The reason many developers are turning to Vue is that it addresses the issues of React and Angular.
  • But, one must not forget that Angular and React are still very big names in the JavaScript world, whereas Vue has just begun to rise.

Vue.js, an MIT-licensed open source project, is a JavaScript library for building web interfaces. The library was first released in 2013, but not many developers took cognizance of it in web framework technology for the next two years. It was 2016 wh
Continue reading “Why Do Developers Now Compare Vue.js to JavaScript Giants Angular and React?”

Mocking API responses with React Apollo – Carlos Martinez – Medium

  • Mocking API responses with React ApolloApollo Client and the GraphQL tools that have been made open source within the last years are pretty awesome, the community that is being builded around them is great.
  • However, as with every new technology, there are a lot of things that need to mature and improve.Documentation on testing is definitely one of the bits that needs a lot of improvements, it isn’t clear what to do, and I personally found myself digging into the source code to understand what to do.One of the problems I faced was that I wanted to use mock responses when testing my app components, and there are at least two ways of doing this:The first way is to use graphql-tools.
  • From their docs:This package allows you to use the GraphQL schema language to build your GraphQL.js schema, and also includes useful schema tools like per-type mocking.You can use this library together with a custom MockNetworkInterface to return mocked responses to your components:const { mockServer } = require(“graphql-tools”);const { print } = MockNetworkInterface { constructor(schema, mocks = {}) { if (!
  • schema) { throw new Error(‘Cannot create Mock Api without specifying a schema’); } this.mockServer = mockServer(schema, mocks); } query(request) { return request.variables); }}This is nice, and very flexible, with graphql-tools you can do pretty much whatever you do in your actual API.What I didn’t like about this approach is that you need your schema in sync with the schema defined in your API (you can do this making an instrospection query to your backend), I also found this approach overcomplicates things unnecessarily.The second (and simpler) approach I found was to use the mockNetworkInterface class, this class is defined in react-apollo/test-utils, you can have a peek on it here.To use it, you first need to define some Mock Requests (these requests need to be exactly the same your components will make):const GraphQLMocks = [ { request: { query: UserProfileQuery, variables: {} }, result: { data: { current_user: { id: 1, first_name: ‘Foo’, last_name: ‘Bar’, email: ‘foo@example.com’ } } } }];The UserProfileQuery is exported from your component:export const UserProfileQuery = gql` query userProfile { current_user { id first_name last_name email } }`;And this is how you use it to setup your tests:import { mockNetworkInterface } from ApolloClient from ‘apollo-client’;import { ApolloProvider } from ‘react-apollo’;import { mount } from ‘enzyme’;import App from ‘.
  • /App.js’;import React from ‘react’;const setupTests = () = { const networkInterface = // or mocks); const client = new ApolloClient({ networkInterface, addTypename: false }); const wrapper = mount( ApolloProvider client={client} App / /ApolloProvider ); return { wrapper };};It is important that you pass addTypename: false to ApolloClient, otherwise you would have to include a __typename field in all your mocks and queries.Now any queries your components make will be handled by your mocked responses, you have full control of what you want to return.And that’s it!

Apollo Client and the GraphQL tools that have been made open source within the last years are pretty awesome, the community that is being builded around them is great. However, as with every new…
Continue reading “Mocking API responses with React Apollo – Carlos Martinez – Medium”

React.js Structures JavaScript for Easy Componentization  

  • JavaScript is in the midst of transforming development teams’ expectations for desktop, server and mobile apps.
  • Enhancements to JavaScript are enabling it to break free of the browser, while technologies such as Node.js and its package manager npm facilitate creation of portable front-end and back-end apps that rival those traditionally created for environments such as Windows, Linux and mobile devices.
  • Components encapsulate the necessary HTML, JavaScript and CSS for a particular component, and apps are built by composing components into larger components that encapsulate their own data and logic.
  • React and Facebook provide a number of recommendations and best practices to help developers build their apps, but developers ultimately shoulder the burden of building the app — creating or procuring the various components, designing the data architecture and testing plan, establishing the look and feel of the app, adapting to necessary display environments, and so forth.
  • Many of the ExtReact components leverage the data package to provide consistent buffering, sorting, filtering and pagination capabilities with minimal developer effort.

JavaScript is in the midst of transforming development teams’ expectations for desktop, server and mobile apps. Enhancements to JavaScript are enabling it to break free of the browser, while technologies such as Node.js and its package manager npm facilitate creation of portable front-end and back-end apps that rival those traditionally created for environments such as Windows, Linux and mobile devices.
Continue reading “React.js Structures JavaScript for Easy Componentization  “