Using Normalizr to organize data in stores — practical guide

Solve the issues with data organizing:  #ReactJS #JavaScript

  • Using Normalizr to organize data in stores — practical guideA React application usually needs some data from the server to be stored locally for immediate use, mainly to be shown on the page.
  • In the response for teachers we get something like this (shape of a server response): [ { students: [ { id, name, studentCourses: [ { studentId, courseId, grande, }, … ], }, … ], courses: [ { id, name, }, … ], }, … ]Here you can read about how to combine data in queries, if you also use Loopback.In this particular case this would spare us two requests, but this is not very useful if we speak about storing on front-end.
  • Secondly, we might need courses inside of a student entity instance, but when we make a query to the server, we don’t include these courses to avoid duplication.To cope with the described issues we can start with Normalizr — a utility that normalizes data with nested objects, just like in our case.
  • If you haven’t used redux-saga in your projects yet, I think this should convince you to do so.The first saga will fetch data:const urls = { teachers: ‘/teachers, students: ‘/students’, courses: ‘/courses’,};export function* fetchModel(model, ids, include) { const url = urls[model]; const where = {id: {inq: ids}}; const filter = {where, include}; const params = {filter}; return yield get({url, params});}The second will store the data:export function* queryModels(modelName, ids, include]) { const singleModelSchema = schema[modelName]; const denormalizedData = yield fetchModel(modelName, ids, include); const normalizedData = normalize(denormalizedData, [singleModelSchema]); const {entities} = normalizedData; yield a reducer will add new pieces of data to the already fetched ones:case ADD_ENTITIES: { const models = action.entities; const newState = cloneDeep(state); return mergeWith(newState, models);}Methods mergeWith and cloneDeep here are from lodash.Having done all that we can query data from server in this manner (selector):export function* fetchTeachers() { yield queryModels(‘teachers’, ids, [ { relation: ‘students’, scope: { include: [‘studentCourses’], } }, { relation: ‘courses’, } ]);}Normalizr uses a normalization schema as described here.Eventually we end up with the state that looks like this: state: { … models: { teachers: {…}, sudents: {…}, courses: {…}, studentCourses: {…}, }, … }This basically is a nice little copy of a part of our database in the store.
  • It is done in queryModels saga and we always know where the fetched data is going to be put.After that we can use it in any page of the app combing it in selectors as required.In our case, if needed, we can get an object for teacher as complicated as this (denormalized data): { students: [ { id, name, studentCourses: […], courses: […], }, … ], courses: [ { id, name, sudents: […], teachers: […], }, … ], }There is also another way.

In one of the projects, we encountered the issues with data organizing. To cope with that we can use Normalizr — a utility that normalizes data with nested objects.
Continue reading “Using Normalizr to organize data in stores — practical guide”

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”

Facebook Isn’t Budging on React’s BSD + Patents License – WordPress Tavern

Facebook Isn’t Budging on React’s BSD + Patents License  #reactjs #WordPress

  • Last month React users petitioned Facebook to relicense the project (and its other open source projects) after the Apache Software Foundation (ASF) added Facebook’s BSD+Patents license to its Category X list of disallowed licenses for Apache PMC members.
  • The request for re-licensing had received 851 “thumbs-up” reactions on GitHub and many developers commented to say that the ASF’s policy disallowing the BSD+Patents license affects their organizations’ ability to continue using React and other open source projects from Facebook.
  • Wolff’s post announcing Facebook’s decision said that the team has not done a good job of communicating the reasons behind its BSD + Patents license and offered a more in-depth explanation:

    As our business has become successful, we’ve become a larger target for meritless patent litigation.

  • “While we respect this decision, it hurts to see so many great ASF projects get churned for policy reasons after using this license for years,” Wolff said in Facebook’s announcement.
  • The company made it clear that they will not be re-licensing React or any other projects simply to satisfy ASF’s policy requirements.

Last month React users petitioned Facebook to relicense the project (and its other open source projects) after the Apache Software Foundation (ASF) added Facebook’s BSD+Patents license to its Category X list of disallowed licenses for Apache PMC members. Participants and subscribers to the GitHub thread waited weeks for a decision on re-licensing while Facebook’s engineering directors discussed the matter internally. The request has now formally been denied.
Continue reading “Facebook Isn’t Budging on React’s BSD + Patents License – WordPress Tavern”

New & Upcoming Course Highlights: Introduction to Core Data & React Native

Read more about our new #ReactNative and #CoreData courses here:  #learntocode

  • Here’s a short list of what we’ve added recently, upcoming course highlights, and our weekly video update of What’s New at Treehouse.
  • React Native is a great option for creating performant iOS and Android applications that feel at home on their respective platforms, all while building on any previous web development experience.
  • In this course we will be building the ultimate superhero app.
  • By the end of this course you should have the confidence to build upon the app that we started and take it to the next level.
  • Saving data on your device is a fundamental part of building apps and in this course we’re going to learn how to use the Core Data framework to persist data between launches by building a simple to-do list app.

Every week, new courses and workshops are published to the growing Treehouse Library! Here’s a short list of what we’ve added recently, upcoming course highlights, and our weekly video update of What’s New at Treehouse.
Continue reading “New & Upcoming Course Highlights: Introduction to Core Data & React Native”

Is your company using React JS framework? You can’t go against Facebook !

Is your company using React JS framework? You can't go against Facebook !

  • This is Facebook’s T&C if you are using React JS framework.
  • To summarize:

    If you use React, you cannot go against Facebook for any patent they hold.

  • So if you are a startup hoping for million dollars acquisition from large companies like Google, Amazon etc. hold on to your dreams.
  • Potential buyers will not touch you with a ten-foot pole, if buying you means they have to surrender their rights to ever sue Facebook for patent infringement.
  • Source: If you’re a startup, you should not use React (reflecting on the BSD + patents license)

Is your company using React JS framework? You can’t go against Facebook !
Continue reading “Is your company using React JS framework? You can’t go against Facebook !”