Categories
Uncategorized

We Build

We Build

Terrific Minds TMX Design Mashup 20219

At Terrific Minds, the development process is considered as a segment of the whole delivery train, and not looked at in isolation. We use many frameworks and technologies at work, but the process is kept largely agnostic. Though the bulk of the development stage falls in between the Design and Business Analysis stages and before the QA stage, since we use Agile methodologies for development, so many of the above stages’ timelines overlap.

THE DEVELOPMENT PROCESS CAN BE ROUGHLY DIVIDED INTO THE FOLLOWING PARTS 

  • System design: Here we decide on the technology to be used and the architecture of the system. This phase typically happens early on in the project, much before the actual development starts.

  • Devops design: The devops (Development-operations) processes get defined in this stage. Setting up of test environment, planning of code deployment, etc. happens here.

  • Development/Coding: This is where the bulk of the work happens. During this stage, code, configuration etc. is created by a team of developers. In Agile methodology, the whole development is chunked into multiple segments called “Sprints”. Each sprint has a predetermined amount of work involved, and at the end of each sprint, the work has to represent a logical block of the entire application that can be showcased to the client after Quality Assurance.

  • Unit testing: Each developer is supposed to unit test his/her code. This is the first stage of Quality Assurance and it involves testing of each functionality in isolation, before it reaches the QA team.

  • Code review: The source code created by a developer is often susceptible to functional and non-functional issues. The aim of code review is to quickly identify red flags such as poor application of design patterns, not following standards or performance considerations. The review process followed is often peer-review.

At Terrific Minds, we use Git for source control. Each developer usually works on a branch specific to the current feature and then uses merge requests to merge code to the mainline, paired with a review and approval process. We also try to automate our devops cycle as much as possible with the use of Continuous Integration tools such as Jenkins, so that deployment to test environments are automated.

Categories
Uncategorized

Creating production-grade web applications using ReactJS

Creating production-grade web applications using ReactJS

Terrific Minds - Magento - eCommerce - Case Study

React.js is one of the most popular JavaScript libraries. It gives a lot of power to developers and encourages them to write clean code. This was evident once we started to use React in our projects. The code was easier to read and more reusable due to the segregation of features into components. We now had the power to create slick interactions without sacrificing performance.

Although everything was great, we still had to squeeze out more performance from our applications. A productiongrade application should also be accessible to crawlers, such as search engines. Google’s crawlers work well with JavaScript UI frameworks like React, but most other crawlers don’t treat them kindly. One major claim many React developers make is that React can run anywhere. This would solve both pressing issues – performance and SEO. So, we tried to set up Server-Side-Rendering in one of our projects. To our surprise, there was no easy way to get server-side rendering up and running quickly in the React ecosystem. The chaos that is NPM(Node Package Manager)has myriads of packages for everything, but we needed to churn out production-grade applications that can scale, so a hack and slash approach simply would not do.

Enter Next.js. Powered by React.js and Node.js under the hood, it’s React on steroids, only much more opinionated. Next.js give us much more power out of the box:

  • Server-Side Rendering: The page could be rendered on the server, and updated on the client browser dynamically.
  • Static Rendering: If you used ReactJs to build a static website that doesn’t change, render once on the server and serve the HTML using a fast webserver like NGINX.
  • Great tooling: With the Next.js command-line interface, we can easily build and start an application.
  • Faster development: In development mode, the application watches for changes from the developer, and helps in iterating quickly. Also, it’s very easy to scaffold a project in Next.js which bundles SASS, Redux, and many other popular libraries used by ReactJs developers
  • Documentation: The Next.js website has a strong documentation available for developers to refer to.
  • Adoption: Next.js is being used by several large companies, and the community is strong. The fact that it is an open-source project only adds to the appeal.

Considering all the above features, it was a no-brainer for us to use Next.js in our projects and the results were overwhelmingly positive. Many other frameworks solve the same problems, but Next.js seems to be the most popular one at the moment.

Categories
Uncategorized

Demystifying PWAs

Demystifying PWAs

Terrific Minds - Magento - eCommerce - Case Study

At the MagentoLive Europe in Amsterdam this month, there was one buzzword – PWA. We have been hearing about PWA or Progressive Web Applications for some time now and the topic has been progressively intensifying in the past few conferences hosted by Magento. Is PWA an elite technology that is accessible to a selected few? Absolutely not! We will try to demystify PWA and its applications in the Magento world.

A simple definition of PWAs is given below: “Progressive Web Apps are user experiences that have the reach of the web, and are:-

  • Reliable – Load instantly and never show the downasaur, even in uncertain network conditions.
  • Fast – Respond quickly to user interactions with silky smooth animations and no janky scrolling.
  • Engaging – Feel like a natural app on the device, with an immersive user experience

This new level of quality allows Progressive Web Apps to earn a place on the user’s home screen.”

PWAs also encourage principles that provide faster load times and more security to users.

Features of PWAs

A PWA is a web application that behaves much like a native application and tries to bridge the gap. This TECH BLOG
includes features such as :

  • Offline loading
  • Push notifications
  • Add to a user’s home screen

So, a PWA tries to stay on a user’s mobile device like an app, but does not require any installation or frequent updates like mobile apps.

Benefits to businesses
Inherently, businesses are averse to technological changes, but some benefits that make PWAs a worthwhile investment are: • Faster load times mean more user engagement and better conversions • Easier to acquire users since it is web-based, as opposed to apps that have to be downloaded and installed • Staying on a user’s mobile device helps in recall value and higher usage More targeted and personalized messaging and promotions can be designed using push notifications.

Why is Magento betting big on PWAs?
Ever since the acquisition by Adobe, Magento has been focusing on improving e-commerce experiences rather than just being a framework. Since PWAs focus a lot on giving the user great experiences on mobile, it makes sense to support them fully. Also, many e-commerce giants have already embraced PWAs and reaped rich dividends such as better user acquisition, more user engagement, and higher conversions. The relevance of PWAs is even more evident when we consider how the native-first strategy failed for many of them and which eventually led to them moving to PWAs.