Tech Guides - Web Development

In JSconf 2018, the former Redux head, Dan Abramov, announced a small tool that he built to simplify data fetching and state management. It was called the future-fetcher/React Context API. Redux, so far, is one of the most popular state management tools that is used widely with React. Even Angular users are quite fond of it. Vue also has a provision for using Redux in its ecosystem. However tools like Mobx are also getting enough popularity because of their simplicity and ease of use. What’s the problem with Redux? The honest answer is that it’s simply too complicated. If we have to understand the real probability of it being replaced by any other tool, then we will have to understand how it works. The workflow is illustrated in the below figure. Source: Freecodecamp.org The above image shows how basic Flux architecture functions and Redux is based quite heavily on this architecture model. This can be very complicated for a novice web developer. A beginner level developer might just get overwhelmed with the use of functional programming concepts like ‘creation’, ‘dispatcher’ and ‘Action’ functions and using them in appropriate situations. Redux follows the same application logic and those who are not comfortable with functional programming, might find using Redux quite cumbersome. That’s where the Future-Fetcher/ Context API comes in. Context API is a production-grade, efficient API that supports things like static type checking and deep updates. In React, different application levels and layers consist of React components and these components have nested relations with each other. In other words, they are connected to each other like a tree and if one component needs to change its state, and it has to pass on the information to the next component, then it transfers an entity called ‘prop’. The state management is important because you would want your application layers to be consistent with your data, so that when one component changes state, the relevant data has to passed on to the component which will allow it to respond accordingly. In Redux, you will have to write functions as mentioned above to implement this. But in context API, the architecture looks a bit different than the Redux-Flux architecture and there lies the difference. Source: Freecodecamp.org In case of Context API, the need to write functions like Action, Dispatch etc. vanishes, that makes the job of a developer quite easy. Here, we only have ‘view’ and the ‘store’ component, where “Store” contains the dynamic state of the application layers. This simplifies a lot of processes. Although the problem of scaling might be an issue in this particular form of architecture. Still, for normal web applications, where dynamic and real time behavior are important, Context API provides a much easier way of implementation. Since this feature has been developed by the primary architect of Redux, the developer community is of the opinion that it might face a tough challenge in the days to come. Still it’s early days to say - Game Over Redux. Creating Reusable Generic Modals in React and Redux Connecting React to Redux & Firebase – Part 1 Connecting React to Redux and Firebase – Part 2

Chief Information Officers (CIOs) are under constant pressure to deliver substantial results that meet business goals. Planning a project and seeing it through to the end is a critical requirement of an effective development process. In the fast-paced world of software development, getting results is an essential key for businesses to flourish. There is a certain pleasure you get from ticking off tasks from your to-do lists. However, this becomes a burden when you are drowning with a lot of tasks on your head. Signs of inefficient processes are prevalent in every business. Unhappy customers, stressed out colleagues, disappointing code reviews, missed deadlines, and increases in costs are just some of the examples that are the direct result of dysfunctional processes. By streamlining your workflow you will be able to compete with modern technologies like Machine Learning and Artificial Intelligence. Gaining access to such technologies will also help you to automate the workflow, making your daily processes even smoother. Listed below are 5 steps that can help you in streamlining your development process. Step 1: Creating a Workflow This is a preliminary step for companies who have not considered creating a better workflow. A task is not just something you can write down, complete, and tick-off. Complex, software related tasks are not like the “do-the-dishes” type of tasks. Usually, there are many stages in software development tasks like planning, organizing, reviewing, and releasing. Regardless of the niche of your tasks, the workflow should be clear. You can always use software tools such as Zapier, Nintex, and ProcessMaker, etc. to customize your workflow and assign levels-of-importance to particular tasks. This might appear as micro-management at first, but once it becomes a part of the daily routine, it starts to get easier. Creating a workflow is probably the most important factor to consider when you are preparing to streamline your software development processes. There are several steps involved when creating a workflow: Mapping the Process Process mapping mainly focuses on the visualization of the current development process which allows a top-down view of how things are working. You can do process mapping via tools such as Draw.io, LucidCharts, and Microsoft Visio, etc. Analyze the Process Once you have a flowchart or a swim lane diagram setup, use it to investigate the problems within the process. The problems can range from costs, time, employee motivation, and other bottlenecks. Redesign the Process When you have identified the problems, you should try to solve them step by step. Working with people who are directly involved in the process (e.g Software Developers) and gaining an on-the-ground insight can prove very useful when redesigning the processes. Acquire Resources You now need to secure the resources that are required to implement the new processes. With regards to our topic, it can range from buying licensed software, faster computers, etc. Implementing Change It is highly likely that your business processes change with existing systems, teams, and processes. Allocate your time to solving these problems, while keeping the regular operations in the process. Process Review This phase might seem the easiest, but it is not. Once the changes are in place, you need to review them accordingly so that they do not rise up again Once the workflow is set in place, all you have to do is to identify the bugs in your workflow plan. The bugs can range anywhere from slow tasks, re-opening of finished tasks, to dead tasks. What we have observed about workflows is that you do not get it right the first time. You need to take your time to edit and review the workflow while still being in the loop of the workflow. The more transparent and active your process is, the easier it gets to spot problems and figure out solutions. Step 2: Backlog Maintenance Many times you assume all the tasks in your backlog to be important. They might have, however, this makes the backlog a little too jam-packed. Well, your backlog will not serve a purpose unless you are actively taking part in keeping it organized. A backlog, while being a good place to store tasks, is also home to tasks that will never see the light of day. A good practice, therefore, would be to either clean up your backlog of dead tasks or combine them with tasks that have more importance in your overall workflow. If some of the tasks are relatively low-priority, we would recommend creating a separate backlog altogether. Backlogs are meant to be a database of tasks but do not let that fact get over your head. You should not worry about deleting something important from your backlog, if the task is important, it will come back. You can use sites like Trello or Slack to create and maintain a backlog. Step 3: Standardized Procedure for Tasks You should have an accurate definition of “done”. With respect to software development, there are several things you need to consider before actually accomplishing a task. These include: Ensure all the features have been applied The unit tests are finished Software information is up-to-date Quality assurance tests have been carried out The code is in the master branch The code is deployed in the production This is simply a template of what you can consider “done” with respect to a software development project. Like any template, it gets even better when you include your additions and subtractions to it. Having a standardized definition of “done” helps remove confusion from the project so that every employee has an understanding of every stage until they are finished. and also gives you time to think about what you are trying to achieve. Lastly, it is always wise to spend a little extra time completing a task phase, so that you do not have to revisit it several times. Step 4: Work in Progress (WIP) Control The ultimate factor that kills workflow is multi-tasking. Overloading your employees with constant tasks results in an overall decline in output. Therefore, it is important that you do not exert your employees with multiple tasks, which only increases their work in progress. In order to fight the problem of multitasking, you need to reduce your cycle times by having fewer tasks at one time. Consider setting a WIP limit inside your workflow by introducing limits for daily and weekly tasks. This helps to keep control of the employee tasks and reduces their burden. Step 5: Progress Visualization When you have everything set up in your workflow, it is time to represent that data to present and potential stakeholders. You need to make it clear that all of the features are completed and the ones you are currently working on. And if you will be releasing the product on time or no? A good way to represent data to senior management is through visualizations. With visualizations, you can use tools like Jira or Trello to make your data shine even more. In terms of data representation, you can use various free online tools, or buy software like Microsoft PowerPoint or Excel. Whatever tools you might use, your end-goal should be to make the information as simple as possible to the stakeholders. You need to avoid clutter and too much technical information. However, these are not the only methods you can use. Look around your company and see where you are lacking in your current processes. Take note of all of them, and research on how you can change them for the better. Author Bio Shawn Mike has been working with writing challenging clients for over five years. He provides ghostwriting, and copywriting services. His educational background in the technical field and business studies has given him the edge to write on many topics. He occasionally writes blogs for Dynamologic Solutions. Microsoft Store updates its app developer agreement, to give developers up to 95% of app revenue React Native Vs Ionic: Which one is the better mobile app development framework? 9 reasons to choose Agile Methodology for Mobile App Development

Migrating from Magento 1 to Magento 2 has been one of the most commonly discussed topics in the world of eCommerce. Magento 2 was made available in 2015. Subsequently, Magento declared it will end its official support to Magento 1 in 2020. This makes the migration to Magento not only desirable but also necessary. Why you should migrate to Magento 2 As mentioned above, support to Magento 1 ends 2020. Here’s a list of the six most important reasons why migration from Magento 1.x to Magento 2 is important for your Magento store. Security Once the official support to Magento ends, security patches for different versions of Magento 1.x will no longer be offered. That means, if you continue running your Magento website on Magento 1.x, you’ll be exposed to a variety of risks and threats, many of which may have no official solution. Competition When your store is practically the only store that hasn’t migrated to Magento 2, you are at a severe competitive disadvantage. So while your competitors enjoy all the innovations that will continue happening on Magento 2, your Magento 1 website will be left out. Mobile friendly From regular shopping to special holiday purchases, an increasingly bigger proportion of e-commerce businesses come from mobile devices. Magento 2 is better optimized for mobile phones as compared to Magento 1. Performance In the e-commerce industry, better performance leads to better business, increased revenue and higher conversions. Magento 2 enables up to 66% faster add-to-cart server response times than Magento 1. Hence, Magento 2 becomes your best bet for growth. Checkout The number of steps for checkout has been slashed in Magento 2, marking a significant improvement in the buying process. Magento 2 offers the Instant Purchase feature which lets repeat customers purchase faster. Interface Magento 1 had an interface that wasn’t always friendly. Magento 2 has delved deeper to find the exact pain-points and made the new interface extremely user-friendly. Adding new products, editing product features or simply looking for tools has become easier with  Magento 2. FAQs for Magento migration By when should I migrate my store? All forms of official support for Magento 1 will be discontinued on June 2020, you should be migrating your store before that. Your Magento e-commerce store should be ready well before the deadline, so it’s highly recommended you start working towards the migration right away. How long will the migration take? It’s difficult to answer that question without further information about your store. The size of your store, its database and the kind of customization you need are some of the factors that influence the time horizon. Should I hire a Magento developer for the migration or should I let my in-house team deal with it? As with the earlier question, this question too needs further information. If you’re having your own team do it, allow them a good deal of time to learn a number of things and factor in a few false-starts as well. However, doing the migration all by yourself means you’ll have to divert a lot of in-house resources to the migration. That can negatively impact your ongoing business and put undue pressure on your revenue streams. Nearly all Magento stores have found that instead if they hire an experienced Magento 2 developer, they get better outcomes. Pre-migration checklist for moving from Magento 1 to Magento 2 Before you carry out the actual migration, you’ll want to prepare your site for the migration. Here’s your pre-migration checklist for Magento 1 to Magento 2 Filter your data. As you move to a better more sophisticated technology, you don’t want to carry outdated data or data that’s no way relevant to your business needs. There’s no point loading the new system with stuff that will only hog resources without ever being useful. So begin by removing data that’s not going to be useful. Critique your site. This is perhaps the best time to have a close look at your site and seriously consider upgrading it. Advanced technology like Magento 2 will produce even better results if your site reflects the current trends in e-commerce store design. Magento 2 offers better opportunities and you don’t want to be left out just because your site isn’t equipped to encash them. Build redundancy. Despite all your planning, there’s always a small risk of some kind of data loss. To safeguard yourself against it, make sure you replicate your Magento 1.x database. When you are actually implementing the migration, use this replicated database as your source for migration, without disturbing the original. Prepare to freeze admin activities. When you begin the dry run or the actual migration, continuing your administrative activities can alter your database. That would result in a patchy migration with some loose ends. To prevent this, go through a drill to prepare your business to stop all admin activities when you practice dry run and actual implementation of migration from Magento 1 to Magento 2. Finalize your blueprints. Unless absolutely critical, don’t waver from your original plans. Sticking to what you had planned will produce the best results. Changes that have not been factored in, can slow down or weaken your migration and even make it more expensive. Steps for migration from Magento 1 to Magento Migration from Magento 1 to Magento 2 doesn’t just depend on 1 activity but it is interdependent on multiple activities. They are: Data Migration Theme Migration Customization Migration, and Extension Migration Let’s look at each of them separately. Data Migration Step 1: Download Magento 2 without taking in the sample data. Follow the steps given for the setup and install the platform. Step 2: You will need a Data Migration Tool to transfer your data. You can download it from the official website. Remember, the Data Migration Tool version should be the same as the Magento 2 codebase version. Step 3: Feed the public keys and private keys for authorization. The keys too are available from the Magento site. Step 4: Configure the Data Migration Tool. How you configure it depends on which Magento 2 edition (Community Edition or Enterprise Edition) you would be using. You may not migrate from Enterprise Edition to Community Edition. Step 5: The next step is a mapping between Magento 1 and Magento 2 databases. Step 6: Get into maintenance mode to prepare for the actual migration. This will stop all administrative activities. Step 7: In the final step, you may migrate the Magento site, along with the system configuration like shipping and payments. Theme Migration Unlike Data Migration, Theme Migration in Magento doesn’t have standard tools that will take care of your theme migration. That’s also because of the fact that the frontend templates and their codes are hugely different in Magento 1.x and Magento 2.x So instead of looking for a tool, the best way out will be to get a new theme. You could either buy a Magento 2 theme that suits your style and requirements and customize it or develop one. This is one of the reasons why we suggested, upgrading your entire Magento store. Customization Migration The name customization itself suggests that what works for one online store won’t fit another. Which is why there’s no single way of migrating any of the customizations you might have done for your Magento 1. So you’ll be required to design all the customizations you need. However, there’s an important point to remember. Because of its efficiency and versatility, your store on Magento 2 may need lesser customization than you believe. So before you hurry into re-designing everything, take time to study what exactly you need and to what degree Magento 2 satisfies those needs. As you migrate from Magento 1.x to Magento 2.x, the number of customizations will possibly turn out to be considerably fewer than what you originally planned. Extension Migration Again, the same rule applies for extensions and plugins. What plugins worked for Magento 1 will likely not work for Magento 2 and you will have to build them again. Instead of interpreting it as something that’s frustrating, you can actually take it as an opportunity to correct minor errors and improve the overall experience. A dedicated Magento developer who specializes in Magento migration services can be of great help here. Final remarks on Magento migration If all this sounds a little overwhelming, relax, you’re not alone. Because Magento 2 is considerably superior to Magento 1, the migration may appear more challenging than what you had originally bargained for. In any case, the migration is compulsory; otherwise, you’ll face security threats and won’t be able to handle the competition. From the year 2020, this migration will not be a choice, so you might as well begin early so that you have more time to plan out things better. If you need help, a competent Magento web development company can make the migration more efficient and easier for you. Author Bio Kaartik Iyer is the Founder & CEO at Infigic Technologies, a web and mobile app development company. Kaartik has contributed to sites like Huffington Post, Yourstory, Tamebay to name a few. He's passionate about fitness, entrepreneurship, startups and all things digital. You can connect with him on LinkedIn for a quick chat on any of these topics. Why should your e-commerce site opt for Headless Magento 2? Adobe is going to acquire Magento for $1.68 Billion 5 things to consider when developing an eCommerce website

The most downloaded Front-end framework in 2017 was React.js. The reason being the component driven architecture and easy to implement Reactive programming principles in applications. However, one of the key challenges faced by the developers is state management for large-scale applications. The ‘Setstate’ facility in React can be a workaround for small level applications, but as the complexity of the application grows, so does the importance of managing application state. That’s where MobX solves a lot of problems faced by the React developers. It’s easy to use and lightweight. MobX features a robust spreadsheet like architecture as shown below. Source: MobX MobX treats any change to the state as a derivative, like in the case of spreadsheets, where you can apply a formula for a particular column and the column values will change accordingly. The same thing happens in MobX. The change in state is reflected as a derivative, based on the derivative, reactions are generated, which are then trickled down to the component tree. So each change is reflected automatically across all the components. This is intuitive and removes a lot of overhead processes which plague Redux. Reactive programming is at the core of MobX. It uses concepts similar to RxJS. Values can be made observable so that when the value changes, anything that uses that value will update automatically. This is a pretty simple to grasp the concept that can make working with data much more intuitive. It has the potential to become not just a State management tool, but according to the creator of MobX, a ‘Data Flow tool’. Code can be expressed more concisely with the new JavaScript decorator syntax although create-react-app doesn’t support this syntax out of the box. MobX is suitable for different Front-end frameworks like Angular which improves its interoperability feature. The additional advantage is not having to go through the laborious set-up an installation and multi-component update process in Redux. MobX is not however without its limitations. Testing is still a matter of concern. It’s not immediately obvious how components should be broken up for testing. It is a bit easier without using the decorator syntax to separate the logic from the view, however, the documentation doesn’t touch on how this works when using the decorator syntax. The advantages and ease of use of MobX outweigh the negatives presently. As long as React component structure and Reactive programming paradigm remain as the foundation for modern day web development, Mobx usage will grow, and we might even see other similar libraries cropping up to tackle the issue of state management. Is Future-Fetcher/Context API replacing Redux? Why do React developers love Redux for state management? Creating Reusable Generic Modals in React and Redux

Web development is one part of a larger project. Devs work away in the background to make sure everything put together by designers, copywriters and marketers looks pretty and works well. Throughout each stage of a project, developers have to perform their own tasks efficiently while ensuring other members are kept in the loop. Therefore, any tools that can help improve your agency’s workflow management process and simplify task management are greatly valued. Every developer, as they move through the ranks from junior to senior status, relies on their stack — a collection of go-to tools to help them get stuff done. Here are 10 tools that you might want to incorporate into a stack of your own. Slack Slack is the outstanding platform for team communication. The tool is designed to simplify messaging allowing users to communicate between groups (Slack allows the creation of multiple conversation “channels” that can be used for different departments or certain aspects of a project) and upload files within conversations. Another great thing about the platform is its integration with other apps — over 600 of them, from bots to project management to developer tools. Apps mean you can perform tasks without having to leave the platform, which is a wonderful thing for productivity. Dropbox When it comes to cloud storage, Dropbox stands tall. It was the first major folder syncing platform and — despite obvious competition from the likes of Google Drive, iCloud, OneDrive and the rest — it remains the best. It's simple, secure, reliable, feature-packed, and great for collaboration. For developers that work in teams, across devices or remotely, Dropbox is essential for seamless access to files. Work can easily be shared, teams managed, and feedback provided from within the platform, improving productivity and ensuring tasks stay on track. It’s also one of the few platforms to work across iOS, Android, Windows, Linux and BlackBerry devices, so no one misses out. GitLab GitLab is one of the best Git repository managers around. The open-source platform provides a cloud-based location where development projects can be stored, tested and edited between teams. If you’re working with another dev on your code, this is the best place from which to do it. While GitHub is also popular with developers, GitLab’s additional features like snippet support (for sharing small parts of code without sharing the entire project), Work in Progress (WIP) labelling, project milestones, and authentication levels, as well as its slick user-interface, make it a superior choice. Postman for Chrome Postman is a free Chrome app designed to make testing and creating APIs easy. And it does a brilliant job at it. Hey, 3.5 million devs can’t be wrong! It’s GUI makes defining HTTP requests (and analyzing responses) more pleasant than it has any right to be, which can’t always be said of similar tools.   Use it in your own work, or when collaborating with larger teams. Just make sure you keep Postman handy whenever you’re working with web apps. Trello Trello is a project management tool that’ll help you keep everything in order, and on schedule. There’s nothing flashy about it, but that's its biggest selling point. By arranging tasks into lists and cards, it makes it easy to manage everything from solo projects to large-scale assignments involving multiple (up to 10) team members. Users can tag each other in cards, leave comments, create checklists, and set deadlines. And tasks can also be color coded for easy identification. Give it a try, you’ll be glad you did. Bitbucket The makers of Trello also created Bitbucket, a version control system that promotes collaboration and scales with your business. The best thing about Bitbucket, besides being able to work with team members (wherever in the world they happen to be), is the ability to leave comments directly in the source code — how about that for productivity? What’s more, it also integrates with Slack, so that Bitbucket notifications show up in channels. Clipy Clipy is a clipboard extension for Mac OS. Nothing special about that you might think. But it’s not until you use the tool that you appreciate its true value. Clipy lets you copy multiple plain text and image items to the clipboard, and offers a simple shortcut menu to bring up clipboard history in an instant. It’s simple, unobtrusive, and no other utility comes close. Plus, it’s free! Brackets Brackets is “a modern, open-source text editor that understands web design”. Most text editors are boring, this one isn’t. By using visual tools in the editor, Brackets makes writing and editing code an easier, more aesthetically pleasing task. It’s written in a combination of CSS, HTML and JavaScript, giving anyone looking to hack or extend it, the opportunity to work in a language they’re well versed in. If you work on front-end applications, makes this tool part of your development arsenal. Grunt Grunt is a JavaScript task runner that allows repetitive tasks to be automated. Time-consuming things like compilation, unit testing, and minification can all be automated without interfering with overall workflow, giving you more time to focus on other, more fun, aspects of a project. Grunt boasts hundreds of plugins and continues to grow by the day, giving you the chance to run every boring task you can think of without any effort. It’s a workflow essential! Yeoman Finally, there’s Yeoman, a development stack featuring all the tools you need to build and adapt web apps. Yeoman features three types of tools to make building easy, thus improving productivity. Firstly, the ‘yo’ scaffolding tool puts the, er, scaffolding in place, collating any build tasks and package manager dependencies that you need. Then, the build tool (Grunt) is used for the heavy lifting — building, previewing, and testing, while the package manager manages dependencies, remove the need for you to do that side of things manually. Of course, a web development stack can, and probably will, consist of more than just 10 tools. But by adding the tools listed here to any that you already use, you’ll notice a definite improvement in how efficiently and effectively work gets done.

The decentralized web refers to a web which is not dominated by powerful monopolies. It’s actually a lot like the web we have now, but with one key difference: its underlying architecture is decentralized, so that it becomes much difficult for any one entity to take down any single web page, website, or service. It takes control away from powerful tech monopolies. Why are people excited about the decentralized web? In effect, the decentralized web is a lot like the earliest version of the web. It aims to roll back the changes that came with Web 2.0, as we began to communicate with each other and share information through centralized services provided by big companies such as Google, Facebook, Microsoft, and Amazon. The decentralized web aims to make us less dependent on these tech giants. Instead, users will have control over their data enabling them to directly interact and exchange messages with others in their network. Blockchain offers a perfect solution to helping us achieve a decentralized web. By creating a decentralized public digital ledger of transactions, you can take the power out of established monopolies and back to those who are simply part of the decentralized network. We saw some advancements in the direction of decentralized web with the launch of Tim Berners-Lee’s startup, Inrupt. The goal of this startup is to get rid of the tech giant’s monopolies on user data. Tim Berners-Lee hopes to achieve this with the help of his open source project, Solid.  Solid provides every user a choice of where they want to store their data, which specific people and groups can access the select elements in a data, and which apps you use. Further examples are Cloudflare introducing IPFS Gateway, which allows you to easily access content from InterPlanetary File System (IPFS), and, more recently, Origin DApp, which is a true peer to peer marketplace on the Ethereum blockchain with origin-js. A note of caution Despite these advances, the decentralized web is still in its infancy. There are still no “killer apps” that promises the same level of features that are we used to now. Many of the apps that do exist are clunky and difficult to use. One of the promises that decentralized makes is being faster, but there is a long way to go on that. There are much bigger issues related to governance such as how the decentralized web will come together when no one is in charge and what is the guarantee that it will not become centralized again. Is the decentralized web a treat… or a trick? Going by the current status of decentralized web, it seems to be a trick. No one likes “change” and it takes a long time to get used to the change. The decentralized web has to offer much more to replace the current functionalities we enjoy. Cloudflare’s decentralized vision of the web: InterPlanetary File System (IPFS) Gateway to create distributed websites Origin DApp: A decentralized marketplace on Ethereum mainnet aims to disrupt gig economy platforms like Airbnb and Uber Tim Berners-Lee plans to decentralize the web with ‘Solid’, an open-source project for “personal empowerment through data”

To answer this question, let’s start by defining what exactly JavaScript fatigue is. JavaScript fatigue is best described as viewing the onslaught of new JavaScript tools, frameworks or packages as a relentless stream of shaggy dog stories instead of an endless stream of creativity and enhanced productivity. I must admit, I myself have a serious case of JavaScript fatigue. Anyone who is plugged into the tech world knows that JavaScript has been having a moment since the release of Node.js in 2009. Obviously, JavaScript was not new in 2009. Its monopoly on web scripting had already made it an old hand in the development world, but with the advent of Node.js, JavaScript began to creep out of web browsers into desktop applications and mobile apps. Pretty soon there was the MEAN stack, a web app architecture that allows for the developer to run a web app end-to-end with only JavaScript, and tools like PhoneGap allowing developers to create mobile apps with good old fashioned HTML, CSS and, you guessed it, JavaScript. I think JavaScript fatigue asks the question, should we really be excited about the emergence of ‘new’ tech based on or built for a scripting language that has been in use for almost 30 years? How did JavaScript fatigue happen? Before I answer the title question, let’s discuss how this happened. Obviously, just the creation/emergence of Node.js cannot be considered the complete explanation of JavaScript fatigue. But, when you consider that JavaScript happens to be a relatively ‘easy’ language, and the language that many people start their development journeys with, a new platform that extended the functionality of such a language (Node.js) easily became a catalyst for the JavaScript wave that has been rolling for the last few years. So, the really simple answer is that JavaScript is easy, so a bunch of people are using it. But who cares? Why is it that a bunch of people using a language that most of us already know is a bad thing? To me that sounds a lot like a good thing. The reason this is problematic actually has nothing to do with JavaScript. There is a difference between using a common language because it is productively advantageous and using a common language because of laziness. Many developers are guilty of the latter. And when a developer is lazy about one thing, they’re probably lazy about all the other things as well. Is it fair to blame JavaScript? So why are there so many lazily created frameworks, APIs, web apps and desktop applications created in JavaScript? Is it really fair to blame the language? No it is not fair. People are not really fed up with JavaScript, they’re fed up with lazy developers, and that is nothing new. Outside of literal laziness in the writing of JS code, there is a laziness based around picking the tools to solve problems. I’ve heard it said that web development or any development for that matter is really not about development tools or process, it's about the results. Regular people don’t care what technologies Amazon uses on their website, while everybody cares about using Amazon to buy things or stream videos. There has been a lot of use of JavaScript for the sake of using JavaScript. This is probably the most specific reason people are talking about JavaScript fatigue. When hammering a nail into a board, a carpenter doesn’t choose a screwdriver because the screwdriver is the newest tool in their toolbox, they choose a hammer, because it's the right tool. Sure, you could use the handle of the screwdriver to bang in that nail, and it would basically work, and then you would get to use your new tool. This is clearly a stupid way to operate. Unfortunately, many of the choices made in the development world today are centered on finding the newest JavaScript tool to solve a problem instead of finding the best tool to solve a problem. If developers eat up new tools like candy, other developers are going to keep creating them. This is the downward spiral we find ourselves in. Using technology to solve problems So, why is everyone talking about JavaScript fatigue? Because it is a real problem, and it's getting real annoying. As has been the case before, many developers have become Narcissus, admiring their code in the reflective pool of the Internet, until they turn to stone. Let’s keep an eye on the prize: using technology to solve problems. If JavaScript is used in this way, nobody would have any qualms with the current JavaScript renaissance. It's when we start developing for the sake of developing that things get a little weird.

Are you confused about which front-end tools you should learn, and which ones you should work with? Do you want to know other web developers are using and what they think is important when it comes to front-end frameworks and libraries?? Fear not! We have the answer to all these questions. In our annual skill-up survey, we spoke to over 8,000 developers and tech pros and asked them about the front-end tools, libraries, and frameworks they regularly use. Of course, choosing the perfect front-end technology depends on your skills, and your area of interest. However, seeing the umpteen number of front-end frameworks available nowadays, we have narrowed it down to just a few. jQuery [box type="shadow" align="alignleft" class="" width=""]Creators: John Resig. Released: 2006 Current version: 3.3.1 Popularity: 49,100 stars on GitHub[/box] jQuery came out to be the undisputed champion of this showdown, with over 70% of respondents choosing it as their go-to front-end library. jQuery is a fast, lightweight and concise Javascript library mainly used for HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. It’s a cross-platform JavaScript library meaning it simplifies Javascript development by reducing coding time. Although Javascript has a large no. of libraries jQuery stands out because of its unlimited tutorials, no cross-platform/browser issues, great user interface, a large no, of plugins, and light, fast, and quick to learn nature. Essentially, jQuery is most suited for applications which need rapid development. Get started with jQuery with the following resources: Getting Started with jQuery 3 [Video] Beginning JavaScript and jQuery [Video] Bootstrap [box type="shadow" align="alignleft" class="" width=""]Creators: Mark Otto and Jacob Thornton. Released: 2011 Current version: 4.1.1 Popularity: 125,108 stars on GitHub[/box] Over 65% of developers choose Bootstrap as their favorite framework to use. And why not, considering Bootstrap is everywhere. Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. The huge popularity of Bootstrap is mainly because of its simplistic use, great community, and a very large number of articles and tutorials, third-party plugins and extensions, theme builders, etc. Our top picks for learning Bootstrap: Bootstrap 4 Site Blueprints Learning Web Development with React and Bootstrap Bootstrap 4 Cookbook Npm (Node package manager) [box type="shadow" align="alignleft" class="" width=""] Creators: Isaac Z. Schlueter. Released: 2011 Current version: 6.1.0 Popularity:16,597 stars on GitHub[/box] NPM is the package manager for node. With NPM, developers can install various modules for web development, share and borrow packages, and manage private development. It consists of three distinct components: Website: The website can be used to discover packages, set up profiles, and manage other aspects of the npm experience. Command Line Interface (CLI): The CLI runs from a terminal. Developers can interact with npm through CLI. Registry: The registry is a large public database of JavaScript software and the meta-information surrounding it. It contains over 600,000 packages (building blocks of code). AngularJS [box type="shadow" align="alignleft" class="" width=""] Creators: Google. Released: 2016 Current version: 6.0.0 Popularity:58,576 stars on GitHub[/box] If you’re looking to build a dynamic and robust Single page applications, AngularJS is the framework you need. Angular is a core part of the MEAN stack (MongoDB, ExpressJS, AngularJS, and Node.js)  So now you can use javascript for both your site’s frontend and backend. Angular is highly modular, making it great for dividing up large-scale work with a team and also makes testing and debugging easy. It pairs with AJAX for amazing speed and can handle heavy user interaction via forms. The functionality-first approach makes Angular more focused on features, making the developers’ jobs easier. Moreover, it has excellent tools and support from the Google community. Start learning Angular with these books. Learning Angular - Second Edition Essential Angular 4 Angular By Example - Third Edition Webpack [box type="shadow" align="alignleft" class="" width=""] Creators: Tobias Koppers, Sean Larkin, Johannes Ewald, Juho Vepsäläinen, and Kees Kluskens. Released: 2012 Current version: 4.8.3 Popularity:41,366 stars on GitHub[/box] Webpack is a module bundler for modern JavaScript applications. Webpack is a tool that’s been around for a number of years but has recently seen its popularity grow. And this is the reason developers awarded it the no. 5 spot on our list. Webpack, is, quite simply brings all the assets you need in front-end development – like JavaScript, fonts, and images, in one place. This is particularly useful if you’re developing complicated front ends. You can go through Deploying Web Applications with Webpack to get up-and-running with Webpack. The other frontend tools which were among the top picks by developers included: Sass: Sass is a web design framework, a CSS preprocessor, which adds special features such as variables, nested rules, and mixins into regular CSS. React: React is one of the most popular javascript libraries for building UI interfaces. It provides speed, simplicity, and scalability for creating single-page applications and mobile applications. Gulp: An open-source javascript toolkit, Gulp is mainly used for automation tasks such as bundling and minifying libraries and stylesheets, quickly running unit tests, running code analysis, etc. Vue: Incrementally adoptable, Vue is a fast-growing Javascript framework. It is much simpler than Angular, both in terms of API, so in terms of design. It is a presentation layer, instead of a full-scale framework. Thus you can easily combine Vue with other libraries. The entire skill up survey report can be downloaded from the Packt website, which details what developers think and feel about the changing tech landscape. Developers think managers don’t know enough about technology. And that’s hurting business. Don’t call us ninjas or rockstars, say, developers 96% of developers believe developing soft skills is important

If you have been paying attention to the world of web development lately, it can seem a little chaotic. There are brand new frameworks and libraries that come out each and every day. These frameworks are sometimes related to previous ones that recently came out, or they are attempting to develop something entirely new. As new technologies emerge, they change things that could have been standard for a long time. With these changes happening fairly often, it can be beneficial or frustrating, depending on the situation. Let's take a look at why the creation of new technologies in web development could be a benefit for some developers, or a negative for others. Why change and novelty in web development is awesome Let's first take a look at how the rapid changes in web development can be a wonderful thing for some developers. New tools and techniques to learn With new tech constantly emerging, you will always have something new to learn as a developer. This keeps the field interesting (at least for me and other developers I know that actually like the field). It allows you to continuously add to your skillset as well. You will constantly be challenged with the newer frameworks when learning them, which will help you learn future technologies faster. Having this skill of being a constant learner is crucial in a field that is always improving. Competition When there are a high number of frameworks that do similar things, the best ones will be the ones that are used by the majority of people. For instance, there are tons of front-end frameworks like React and Angular, but React and Angular are the ones that survive simply because of their popularity and ease of use. This is similar to how capitalism works: Only the best will survive. This creates a culture of innovation in the web development community and causes even more tech to be developed, but at a higher quality. Even better products A large amount of technology being released in a short period of time allows for developers to develop creative and stunning web pages using various combinations of technologies working together. If websites are stunning and easy to use, businesses are more likely to get customers to use their products. If customers are more likely to use products, that probably means they are spending money and therefore growing the economy. Who does not love awesome products anyway? Workflows become more efficient and agile When better web development tools are created, it becomes easier for other web developers out there to create their own web apps. Usually newer technologies present a brand new way of accomplishing something that happened to previously be more difficult. With this increased ability it allows you to build on top of the shoulder of giants, allowing new developers to create something that previously was too difficult or time consuming. Why change and novelty in web development is a pain Now let's take a look at how the ever-changing state of web development can be a bad thing for web developers. New tools require more learning time With each new technology, the user must learn exactly how it works and how it can even benefit their company or project. There is some time in the beginning that must be spent on actually figuring out how to get the new technology to work. Depending on the documentation, this can sometimes be easier than others, but that extra time can definitely hurt if you are attempting to hit a hard deadline. Identifying risk v. reward can be a challenge With attempting something new, there is always a risk involved. It can turn out that this framework will take up a large portion of your time to implement, and it may only give you a minor performance increase, or minor reduction in development time. You must make this tradeoff yourself. Sometimes it is worth it, other times it definitely is not. Support lifespans are getting shorter for many tools Something that is not popular or widely used will tend to lose support. You may have been an early adopter, when you thought that this technology would be great. Just because the technology was supported today, does not mean it will be supported in the future, when you plan on using it. Support can sometimes make or break the usage of an application and it can sometimes be safer to go with a more stable framework. In my opinion, an ever-changing web development landscape is a good thing, and you just need to keep up. But I've attempted to give you both sides of the coin in order for you to make a decision on your own. Antonio Cucciniello is a Software Engineer with a background in C, C++ and JavaScript (Node.js) from New Jersey. His most recent project called Edit Docs is an Amazon Echo skill that allows users to edit Google Drive files using your voice. He loves building cool things with software, reading books on self-help and improvement, finance, and entrepreneurship. Follow him on twitter @antocucciniello, and follow him on GitHub.

Since React Native[1] came out, the core group of developers, as well as the community, kept on improving its framework, including the performance and stability of the technology. In this article, we talk about React Native's performance. This blog post is aimed at those people who want to learn more about React Native, but it might be a bit too complex for beginners. How does it work? In order to understand how to optimize our application, we have to understand how React Native works. But don't worry; it's not too hard. Let’s take the following piece of code into consideration: st=>start: Javascript e=>end: Natif op=>operation: Bridge st->op->e Let's discuss what it represents. React Native bases itself on two environments: a JS (Javascript) environment and a Native environment. These two entities communicate together with a bridge. The JS is our "organizer." This is where we will run our algorithms, moderate our views, run network calls, and so on. The Native is there for the display and the physical link part. It senses physical events as well as some virtuals if we ask it to do so, and then sends it to the JS part. The bridge exists as a link, as shown in the following code:       render(): ReactElement<*> {     return ( <TextInput           value={''}           onChangeText={() => { /* Here we handle native event */ } />     );  } Here, we simply have a Text Input. Most of the component involves all the branches of the React Native stack. This Text Input is called in JS, but is displayed on the device in Native. Every character typed in the Native component involves the physical event, transforms it in letter or action, and then transmits it by the bridge to the JS component. In all of the transactions of data between JS and Native, the Bridge always intervenes so that the data is included in both parts. The bridge has to serialize the data. The bridge is simple. It's a bit stupid, and it has only one job, but... it is the one that will bother us the most. The Bridge and other losses of performance Bridge Imagine that you are in an airport. You get your ticket online in five minutes; you are already in the plane and the flight will take the time that it's supposed to. However, before that, there's the regulation of the flight—the checking in. It will take horribly long to find the right flight, drop-down your luggage at the right place, go through security and get yourself checked, and so on. Well, this is our Bridge. Js is fast even though it is the main thread. Native is also fast, but the Bridge is slow. Actually, it's more like it has so much data to serialize that it takes it so much time to serialize that he can't improve its performance. Or... It is slow, simply because you made it go slow! The Bridge is optimized to batch the data[2]. Therefore, we can't send it data too fast; and, if we really have to, then we have to minimize to the maximum. Let's take for example an animation. We want to make a square go from left to the right in 10 seconds. The pure JS versions:       /* on top of class */ let i = 0; loadTimer = () => {     if (i < 100) {         i += 1;         setTimeout(loadTimer, 100);     } }; ... componentDidMount(): void {     loadTimer(); } ... render(): ReactElement<*> {     let animationStyle = {         transform: [             {                 translateX: i * Dimensions.get('window').width / 100,             },         ],     };     return ( <View             style={[animationStyle, { height: 50, width: 50, backgroundColor: 'red' }] }         />     ); } Here is an implementation in pure JS of a pseudo animation. This version, where we make raw data go through the bridge, is dirty. It's dirty code and very slow, TO BAN! Animated Version:       ... componentDidMount(): void {     this.state.animatedValue.setValue(0);     Animated.spring(this.state.animatedValue, {         toValue: 1,     }); } ... render(): ReactElement<*> {     let animationStyle = {         transform: [             {                 translateX: this.state.animatedValue.interpolate({                     inputRange: [0, 1],                     outputRange: [0, Dimensions.get('window').width],                 }),             },         ],     };     return ( <Animated.View             style={[animationStyle, { height: 50, width: 50, backgroundColor: 'red' }] }         />     ); } It's already much more understandable. The Animated library has been created to improve the performance of the animations, and its objective is to lighten the use of the bridge by sending predictions of the data to the native before starting the animation. The animation will be much softer and successful with the rightful library. The general perfomance of the app will automatically be improved. However, the animation is not the only one at fault here. You have to take time to verify that you don't have too much unnecessary data going through the bridge. Other Factors Thankfully, the Bridge isn't the only one at fault, and there are many other ways to optimize a React Native application.Therefore, here is an exhaustive list of why and/or how you can optimize your application: Do not neglect your business logic; even if JS and native are supposed to be fast; you have to optimize them. Ban the while or synchronize functions, which takes time in your application. Blocking the JS is the same as blocking the application. The rendering of a view is costly, and it is done most of the time without anything changing! It's why you MUST use the 'shouldComponentUpdate' method in your components. If you do not manage to optimize a JavaScript component, then it means that it would be good to transduce it in Native. The transactions with the bridge should be minimized. There are many states in a React Native application. A debug stage, which is a release state. The release state increases the performance of the app greatly with the flags of compilation while taking out the dev mode. On the other hand, it doesn't solve everything. The 'debugger mode' will slow down your application because the JS will turn on your browser and won't do it on your phone. Tools The React Native "tooling" is not yet very developed, but a great part of the toolset is that itis coming from the application. A hundred percentof the functionality is native. Here is a short list of some of the important tools that should help you out: Tools Platform Description react-addons-perf Both This is a tool that allows simple benchmarks to render components; it also gives the wasted time (the time loss to give the components), which didn't change. Systrace Android This is hard to use but useful to detect big bottlenecks. Xcode iOS This function of Xcode allows you to understand how our application is rendered (great to use if you have unnecessary views). rn-snoopy Both Snoopy is a softwarethatallows you to spy on the bridge. The main utility of this tool is the debug, but it can be used in order to optimize. You now have some more tricks and tools to optimize your React Native application. However,there is no hidden recipeor magic potion...It will take some time and research. The performance of a React Native application is very important. The joy of creating a mobile application in JavaScript must at least be equal to the experience of the user testing it. About the Author Pierre Monge is an IT student from Bordeaux, France. His interests include C, JS, Node, React, React Native, and more. He can be found on GitHub @azendoo. [1]React Native allows you to build mobile apps using only JavaScript. It uses the same design as React, allowing you to compose a rich mobile UI from declarative components. [2]Batch processing

If you are new to JavaScript, you may find it a little confusing depending on what computer language you were using before. Although JavaScript is my favorite language to use today, I cannot say that it was always this way. There were some things I truly disliked and was genuinely confused with in JavaScript. At this point I have come to accept these things. Today we will discuss the five hurdles you may come across in the JavaScript programing language. Global variables No matter what programming language you are using, it is never a good idea to have variables, functions, or objects as part of your global scope. It is good practice to limit the amount of global variables as much as possible. As programs get larger, there is a greater chance of naming collisions and giving access to code that does not necessarily need it by making it global. When implementing things, you want a variable to have a large enough scope as you need it to be. In JavaScript, you can access some global variables and objects through window. You can add things to this if you would like, but you should not do this. Use of Bitwise Operators As you probably know, JavaScript is a high level language that does not communicate with the hardware much. There are these things called Bitwise Operators that allow you to compare the bits of two variables. For instance x & y does an AND operation on x and y. The problem with this is, in JavaScript there is no such thing as integers, only double precision floating point numbers. So in order to do the bitwise operation, it must convert x and y to integers, compare the bits, and then convert them back to floating point numbers. This is much slower to perform and really should not be done, but then again it is somehow allowed. Coding style variations From seeing many different open source repositories, there does not seem to be one coding style standard that everyone adheres too. Some people love semicolons, others hate them. Some people adore ES6, other people despise it. Personally, I am fan of using standard for coding style, and I use ES5. That is soley my opinion though. When comparing code with other people who have completely different styles, it can be difficult to use their code or write something similar. It would be nice to have a more generally accepted style that is used by all JavaScript developers. It would make us overall more productive. Objects Coming from a class-based language, I found the topic of prototypical inheritance difficult to understand and use. In prototypical inheritance all objects inherit from Object.prototype. That means that if you try to refer to a property of an object that you have not defined for yourself, but it exists as part of Object.prototype, then it will execute using that property or function. There is a chain of objects where each object inherits all of the properties from its parent and all of that parents' parents. Meaning, your object might have access to plenty of functions it does not need. Luckily, you can override any of the parent functions by establishing a function for this object. A large amount of falsy values Here is a table of falsy values that are used in JavaScript: False Value Type 0 Numbers NaN Numbers '' String false Boolean null Object undefined undefined All of these values represent a different falsy value, but they are not interchangeable. They only work for their type in JavaScript. As a beginner, trying to figure out how to check for errors at certain points in your code can be tricky. Not to harp on the problem with global variables again, but undefined and NaN are both variables that are part of global scope. This means that you can actually edit the values of them. This should perhaps be illegal, because this one change can affect your entire product or system. Conclusion As mentioned in the beginning, this post is simply an opinion. I am coming from a background in C/C++ and then to JavaScript. These were the top 5 problems I had with JavaScript that made me really scratch my head. You might have a completely different opinion reading this from your different technical background. I hope you share your opinion! If you enjoyed this post, tweet and tell me your least favorite part of using JavaScript, or if you have no such problems, then please share your favorite JavaScript feature! About the author Antonio Cucciniello is a Software Engineer with a background in C, C++ and JavaScript (Node.Js) from New Jersey.   His most recent project called Edit Docs is an Amazon Echo skill that allows users to edit Google Drive files using your voice. He loves building cool things with software, reading books on self-help and improvement, finance, and entrepreneurship. Follow him on twitter @antocucciniello, and follow him on GitHub here: https://github.com/acucciniello

Over the past few years, headless e-commerce has been pretty much in talks often being touted as the ‘future of e-commerce’. Last year, in a joint webinar conducted by Magento on ten B2B eCommerce trends for 2018, BORN and Magento predicted that headless CMS commerce will become a popular type of website architecture in the coming year and beyond, for both B2B and B2C businesses. Magento Headless is one such headless CMS which is gaining rapid popularity. Those who have recently jumped on the Magento bandwagon might find it new and hard to grasp. So, in this the post we will give a brief on what is headless Magento, its benefits, and why should you opt for Headless Magento 2. What is a Headless Browser? Headless browsers are basically software-enabled browsers offering a separate user interface. You can automate various actions of your website and monitor the performance under different circumstances. If you’re working under command line instructions in a headless browser, then there is no GUI. With the help of a headless browser, one can actually view several things such as the dimensions of a web layout, font family and other design elements used in a particular website. Headless browsers are mainly used to test web pages. Earlier, e-commerce websites like Magento, Shopify used to have their back-end and front-end tightly integrated. After the introduction of the headless architecture, front-end separated from the back-end. As a result, both parts work independently. There are various e-Commerce platforms that support a headless approach such as Magento, BigCommerce, Shopify, and many more. With Shopify, if you already have a website you can take the headless approach and use Shopify for your sales with links to it from your main website. Like Shopify, BigCommerce also offers a good range of themes and templates to make sure stores look professional and get up-and-running fast. The platform incorporates a full-featured CMS that allows you to run an entire website, not just your online store. Going headless with browsers means that you are running the output in a non-graphical environment such as Linux terms, without X-Windows or Wayland. For Google search algorithms, headless browsers play quite a crucial role. The search engine strongly recommends using Headless architecture because it helps Google to create Ajax websites on the web. So, websites which integrate the headless browser on the web server get easy access by the search engine. This is because Google can access the Ajax website program on the server before making it available for search engine rendering. What are the benefits of using a Headless browser? Going headless has a variety of benefits. If you are a web designer, the markup in HTML would be simple to understand. This is because PHP code, complex JavaScript, widgets are no longer in use – just a plain HTML with some kind of additional placeholder-syntax is required. This also means that the HTML page could be served statically, bringing the application load time down by a significant amount. From the e-commerce perspective, it acts as a viable channel for sales, where a majority of traffic comes from mobile. With the advent of disruptive technologies such as Headless browser for Magento, the path to purchase has expanded. Today it not only includes mobile traffic but even features a complex matrix of buyer touchpoints. Why use a headless browser for Magento? Opting for Magento featuring a headless browser has benefits of its own. Because in Magento, JavaScript coded parts are loosely coupled but the scope of flexibility widens when it comes to choosing any of frameworks such as AngularJs, VueJs, and others. In other words, one does not need to be a Magento developer to build on Magento. All you have to do is focus on a REST API. For instance, if a single page is loading 15 different resources of course from different URLs, the HTML document would become optimal. Magento is a flexible framework that can be used to create your own logic such as pricing, logins, checkout, etc. With a headless browser, Magento gets a clear performance boost. All static parts of the pages are loaded quickly, and the dynamic parts of the pages are loaded lazily through Ajax. In Magento 2, you have the additional support of full page cache. It may even interest you to know that Magento 2 offers Private Content which is equipped to handle lazy loading more efficiently. Isn't Magento 2 headless already? One of the common misconceptions that I have come across is people believing that Magento 2 is already headless. For Magento to be headless, a JavaScript developer requires knowing KnockoutJS ViewModels to make use of the Magento logic. If the ViewModels do not suffice, a Magento developer should add backend logic to this JavaScript layer. However, this also applies to go 100% headless: Whenever a REST resource won’t be available, professionals must make headless for Magento 2 available. To be or not to be headless will always be in talks because an HTML document not only contains the templating part but also static content that shouldn’t be changed. For me, a headless approach is best suited for businesses who have a CMS website for B2C and B2B storefront. It is also popular among those who are looking to put their JavaScript teams back to work. Author Bio Olivia Diaz is working in eTatvaSoft. Being a tech geek, she keeps a close watch over the industry focusing on the latest technology news and gadgets.

In the few years we’ve seen Node.js explode onto the tech scene and go from strength to strength – In fact, the rate of adoption has been so great that the Node Foundation has mentioned that in the last year alone we’ve seen the amount of developers using the server-side platform have grown by 100% to reach a staggering 3.5 million users. Early adopters to Nodehave included Netflix, PayPal, and even Walmart. The Node fanbase is constantly building new Node Package Managerpackages to share among themselves. With React and Angular offering the perfect accompaniment to Node in modern web applications, along with a host of JavaScript tools like Gulp and Grunt able to use Node’s best practices for easier development Node has become an essential tool for the modern JavaScript developer, one that shows no signs of slowing down or being replaced. Whether Node will be around a decade from now remains to seen, but with a hungry user base, thousands of user created npms already created, and full-stack JavaScript moving to be the cornerstone of most web applications, it’s definitely not going anyway anytime soon. For now, the future really is Node. Want to get started learning Node? Or perhaps you’re looking give your skills the boost to ensure you stay on top? We’ve just released Node.js Blueprints, and if you’re looking to see the true breadth of possibilities that Node offers you then there’s no better way to discover how to apply this framework in new and unexpected ways. But why wait? With a free Mapt account you can read the first 2 chapters for nothing at all! When you’re ready to continue learning just what Node can do, sign up to Mapt to get unlimited access to every chapter in the book, along with the rest of our entire video and eBook range, at just $29.99 per month!

Take any major conference that happened this year, Google I/O, Apple’s WWDC, or Microsoft Build. A major focus of all these conferences by top-notch tech leaders is improving User experience, smoothing out the process of how a user experiences their products. In present times, the user experience is heavily dependent on how a system interacts with a human. It may be either through responsive web designs, or appealing architectures. It may also be through an interactive module, such as a conversational UI, a chatbot, or a voice interface—essentially the same thing albeit with slight changes in their definition. Irrespective of they are called, these UX models have one fixed goal: to improve the interaction between a human, and a system, such that it feels real. In our recently conducted Packt Skill-up survey 2018, we asked developers and tech pros about whether Conversational User Interfaces and chatbots are going to be the future for web UI? Well, it seems yes, as over 65% of respondents, agreed that chat interactions and Conversational User Interfaces are the future of the web. After the recent preview of the power of Google Duplex, those numbers might be even higher if asked again today. Why has this paradigm of interacting with the web shifted from text and even visual searches on mobile to Voice, Natural language, and conversation UI? Why is Apple’s Siri, Google’s Voice assistant, Microsoft’s Cortana, Amazon Echo, releasing new versions every day? Computing power & NLP, the two pillars Any chatbot, or voice interface, requires two major factors to make them successful. One being computational power, which makes a conversational UI process complex calculations. And natural language processing, which actually makes a chatbot conduct human-like conversations. Both these areas have made tremendous progress in the recent times. A large number of computational chips namely GPUs, TPUs, as well as quantum computers, are being developed, which are capable of processing complex calculations in a jiffy. NLP has also gained momentum both in speech recognition capabilities (understanding language) and artificial intelligence (learning from experience). As technology in these areas expands, it paves way for companies to adopt conversational UIs as their main user interface. The last thing we need is more apps There are already a very large number of apps (read millions) available in app stores and they are increasing every day. We are almost at the peak of the hype cycle. And there is only downfall from here. Why? Well, I’m sure, you’ll agree, downloading, setting up, and managing an app is a hassle, not to mention, humans have limited attention spans, so switching between multiple apps happens quite often. Conversational UIs are rapidly taking up the vacuum left behind by mobile apps. They integrate functionalities of multiple apps in one. So you have a simple messaging app, which can also book cabs, search, and shop or order food. Moreover, they can simplify routine tasks. AI enabled chatbots, can remind you of scheduled meetings, bring up the news for you every morning, analyze your refrigerator for food items to be replenished, and update your shopping cart, all with simple commands. Advancements in deep learning have also produced, what are known as therapist bots. Users can confide in bots just as they do with human friends when they have a broken heart, have lost a job, or have been feeling down. (This view does assume that the service provider respects the users’ privacy and adheres to strict policies related to data privacy and protection.) The end of screen-based interfaces Another flavor of Conversational UI is the Voice User interfaces (VUI). Typically, we interact with a device directly through a touchscreen or indirectly with a remote control. However, VUI is the touch-less version of technology where you only need to think aloud with your voice. These interfaces can work solo, like Amazon Echo, or Google Home or be combined with text-based chatbots, like Apple Siri, Google voice assistant etc. You simply need to say a command or type it, and the task is done. “Siri, Text Robert, I’m running late for the meeting.” And boy! Are voice user interfaces growing rapidly! Google Duplex, announced at Google I/O 2018, can even make phone calls for the users imitating human natural conversation almost perfectly. In Fact, it also adds pause-fillers and phrases such as “um”, “uh-huh “, and “erm” to make the conversation sound as natural as possible. Voice interfaces also work amazingly for people with disabilities including Visual imparities. Users, who are unable to use screens and keyboards, can use VUI for their dat-to-day tasks. Here’s a touching review of Amazon Echo shared by a wheelchair-bound user about how the device changed his life. The world is being swept over by the wave of Conversational UI, Google duplex being the latest example. As AI deepens its roots, across the technology ecosystem, intelligent assistant applications like, Siri, Duplex, Cortana will advance. This boom will push us closer to Zero UI, a seamless and interactive UI which eradicates the barrier between user and device. Top 4 chatbot development frameworks for developers How to create a conversational assistant or chatbot using Python Building a two-way interactive chatbot with Twilio: A step-by-step guide

Although chatbots have been under development for at least a few decades, they did not become mainstream channels for customer engagement until recently. Due to serious efforts by industry giants like Apple, Google, Microsoft, Facebook, IBM, and Amazon, and their subsequent investments in developing toolkits, chatbots and conversational interfaces have become a serious contender to other customer contact channels. In this time, chatbots have been applied in various sectors and various conversational scenarios within sectors like retail, banking and finance, governmental, health, legal, and many more. This tutorial is an excerpt from a book written by Srini Janarthanam titled Hands-On Chatbots and Conversational UI Development. This book is organized as eight chatbot projects that will introduce the ecosystem of tools, techniques, concepts, and even gadgets relating to conversational interfaces. Over the last few years, an ecosystem of tools and services has grown around the idea of conversational interfaces. There are a number of tools that we can plug and play to design, develop, and manage chatbots. Mockup tools Mockups can be used to show clients as to how a chatbot would look and behave. These are tools that you may want to consider using during conversation design, after coming up with sample conversations between the user and the bot. Mockup tools allow you to visualize the conversation between the user and the bot and showcase the dynamics of conversational turn-taking. Some of these tools allow you to export the mockup design and make videos. BotSociety.io and BotMock.com are some of the popular mockup tools. Channels in Chatbots Channels refer to places where users can interact with the chatbot. There are several deployment channels over which your bots can be exposed to users. These include Messaging services such as Facebook Messenger, Skype, Kik, Telegram, WeChat, and Line Office and team chat services such as Slack, Microsoft Teams, and many more Traditional channels such as the web chat, SMS, and voice calls Smart speakers such as Amazon Echo and Google Home. Choose the channel based on your users and the requirements of the project. For instance, if you are building a chatbot targeting consumers, Facebook Messenger can be the best channel because of the growing number of users who use the service already to keep in touch with friends and family. To add your chatbot to their contact list may be easier than getting them to download your app. If the user needs to interact with the bot using voice in a home or office environment, smart speaker channels can be an ideal choice. And finally, there are tools that can connect chatbots to many channels simultaneously (for example, Dialogflow integration, MS Bot Service, and Smooch.io, and so on). Chatbot development tools There are many tools that you can use to build chatbots without having to code even a single line: Chatfuel, ManyChat, Dialogflow, and so on. Chatfuel allows designers to create the conversational flow using visual elements. With ManyChat, you can build the flow using a visual map called the FlowBuilder. Conversational elements such as bot utterances and user response buttons can be configured using drag and drop UI elements. Dialogflow can be used to build chatbots that require advanced natural language understanding to interact with users. On the other hand, there are scripting languages such as Artificial Intelligence Markup Language (AIML), ChatScript, and RiveScript that can be used to build chatbots. These scripts will contain the conversational content and flow that then needs to be fed into an interpreter program or a rules engine to bring the chatbot to life. The interpreter decides how to progress the conversation by matching user utterances to templates in the scripts. While it is straightforward to build conversational chatbots using this approach, it becomes difficult to build transactional chatbots without generating explicit semantic representations of user utterances. PandoraBots is a popular web-based platform for building AIML chatbots. Alternatively, there are SDK libraries that one can use to build chatbots: MS Bot Builder, BotKit, BotFuel, and so on provide SDKs in one or more programming languages to assist developers in building the core conversational management module. The ability to code the conversational manager gives developers the flexibility to mold the conversation and integrate the bot to backend tasks better than no-code and scripting platforms. Once built, the conversation manager can then be plugged into other services such as natural language understanding to understand user utterances. Analytics in Chatbots Like other digital solutions, chatbots can benefit from collecting and analyzing their usage statistics. While you can build a bespoke analytics platform from scratch, you can also use off-the-shelf toolkits that are widely available now. Many off-the-shelf analytics toolkits are available that can be plugged into a chatbot, using which incoming and outgoing messages can be logged and examined. These tools tell chatbot builders and managers the kind of conversations that actually transpire between users and the chatbot. The data will give useful information such as the conversational tasks that are popular, places where conversational experience breaks down, utterances that the bot did not understand, and the requests which the chatbots still need to scale up to. Dashbot.io, BotAnalytics, and Google's Chatbase are a few analytic toolkits that you can use to analyze your chatbot's performance. Natural language understanding Chatbots can be built without having to understand utterances from the user. However, adding the natural language understanding capability is not very difficult. It is one of the hallmark features that sets chatbots apart from their digital counterparts such as websites and apps with visual elements. There are many natural language understanding modules that are available as cloud services. Major IT players like Google, Microsoft, Facebook, and IBM have created tools that you can plug into your chatbot. Google's Dialogflow, Microsoft LUIS, IBM Watson, SoundHound, and Facebook's Wit.ai are some of the NLU tools that you can try. Directory services One of the challenges of building the bot is to get users to discover and use it. Chatbots are not as popular as websites and mobile apps, so a potential user may not know where to look to find the bot. Once your chatbot is deployed, you need to help users find it. There are directories that list bots in various categories. Chatbots.org is one of the oldest directory services that has been listing chatbots and virtual assistants since 2008. Other popular ones are Botlist.co, BotPages, BotFinder, and ChatBottle. These directories categorize bots in terms of purpose, sector, languages supported, countries, and so on. In addition to these, channels such as Facebook and Telegram have their own directories for the bots hosted on their channel. In the case of Facebook, you can help users find your Messenger bot using their Discover service. Monetization Chatbots are built for many purposes: to create awareness, to support customers after sales, to provide paid services, and many more. In addition to all these, chatbots with interesting content can engage users for a long time and can be used to make some money through targeted personalized advertising. Services such as CashBot.ai and AddyBot.com can integrate with your chatbot to send targeted advertisements and recommendations to users, and when users engage, your chatbot makes money. In this article, we saw tools that can help you build a chatbot, collect and analyze its usage statistics, add features like natural language understanding, and many more. The aforementioned is not an exhaustive list of tools and nor are the services listed under each type. These tools are evolving over time as chatbots are finding their niche in the market. This list gives you an idea of how multidimensional the conversational UI ecosystem is and help you explore the space and feed your creative mind. If you found this post useful, do check out the book, Hands-On Chatbots and Conversational UI Development, which will help you explore the world of conversational user interfaces. How to build a chatbot with Microsoft Bot framework Facebook’s Wit.ai: Why we need yet another chatbot development framework? How to build a basic server side chatbot using Go