Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon

Tech Guides - Front-End Web Development

54 Articles
article-image-react-js-why-you-should-learn-the-front-end-javascript-library-and-how-to-get-started
Guest Contributor
25 Aug 2019
9 min read
Save for later

React.js: why you should learn the front end JavaScript library and how to get started

Guest Contributor
25 Aug 2019
9 min read
React.JS is one of the most powerful JavaScript libraries. It empowers the interface of major organisations such as Amazon (an e-commerce giant has recently introduced a programming language of its own), PayPal, BBC, CNN, and over a million other websites worldwide. Created by Facebook, React.JS has quickly built a daunting technical reputation and a loyal fan following. Currently React.js is extensively mentioned in job openings - companies want to hire dedicated react.js developer more than Vue.js engineers. In this post, you’ll find out why React.JS is the right framework to start your remote work, despite the library’s steep learning curve and what are the ways to use it more efficiently. 5 Reasons to learn React.JS Developers might be hesitant to learn React as it’s not a full-fledged framework and a developer needs to handle models and controllers on their own. Nevertheless, there are more than a handful of reasons to become a react js developer. Let’s take a closer look at them: 1. It’s functional There’s no need to use classes in React. The platform relies heavily on functional components, allowing developers not to overcomplicate the codebase. While classes offer developers a handful of convenient features (using life cycle hooks, and such), the benefits provided by the functional syntax are loud and clear: Higher readability. Properties like state functions or lifecycle hooks tend to make reading and testing the code a pain in the neck. Plain JS functions are easier to wrap your head around. A developer can achieve the same functionality with less code. The software engineering team will more likely adhere to best practices. Stateless functional components encourage front-end engineers to separate presentational and container components. It takes more time to adjust to a more complex workflow - in the long run, it pays off in a better code structure. ES6 destructuring helps spot bloated components. A developer can see the list of dependencies bound to every component. As a result, you will be able to break up overly complex structures or rethink them altogether. React.JS is the tool that recognizes the power of functional components to their fullest extent (even the glorified Angular 2 can’t compare). As a result, developers can strive for maximum code eloquence and improved performance. 2. It’s declarative Most likely, you are no stranger to CSS and the SQL database programming language, and, as such, are familiar with declarative programming. Still, to recap, here are the differences between declarative and imperative approaches: Imperative programming uses statements to manipulate the state of the program. Declarative programming is a paradigm that changes the system based on the communication logic. While imperative programming gives developers a possibility to design a control flow step-by-step in statements and may come across as easier, it is declarative programming to have more perks in the long run. Higher readability. Low-level details will not clutter the code as the paradigm is not concerned with them. More freedom for reasoning. Instead of outlining the procedure step-by-step, a  successful React JS developer focuses on describing the solution and its logic. Reusability. You can apply a declarative description to various scenarios - that is times more challenging for a step-by-step construct. Efficient in solving specific domain problems. High performance of declarative programming stems from the fact that it adapts to the domain. For databases, for instance, a developer will create a set of operations to handle data, and so on. Capitalizing on the benefits of declarative programming is React’s strong point. You will be able to create transparent, reusable, and highly readable interfaces. 3. Virtual DOM Developers that manage high-load projects often face DOM-related challenges. Bottlenecks tend to appear even after a small change in the document-object-model. Due to the document object model’s tree structure, there’s a high interconnectivity between DOM components. To facilitate maintenance, Facebook has implemented the virtual DOM in React.JS. It allows developers to ensure the project’s error-free performance before updating an actual DOM tree. Virtual DOM provides extra assurance in the app’s performance - in the long run, it significantly improves user satisfaction rates. 4. Downward data binding As opposed to Angular two-way data binding, React.JS uses the downward structure to ensure the changes in child structures will not affect parents. A developer can only transfer data from a parent to a child, not vice versa. The key components of downward data binding include: Passing the state to the child components as well as the view; The view triggers actions; Actions can update the state; State updates are passed on to the view and the child components. Compared to the two-way data binding, the one implemented by React.JS is not as error-prone (a developer controls data to a larger extent), more comfortable to test and debug due to a clearly defined structure. 5. React Developer Tools React.JS developers get to benefit from a wide toolkit that covers all facets of the application performance. There’s a wide array of debugging and design solutions, including a life-saving React Developer Tools extension for Chrome and Firefox. Using this and other tools, you can define child and parent components, examine their state, observe hierarchies, and inspect props. Advantages of React.js React.JS helps developers systemize the interfaces of their projects by introducing the ‘components’ structure. The library allows the creation of modular views that consist of reusable blocks - pop-ups, tables, etc. One of the most significant advantages of using React.js is the way it improves user experience. A textbook example of library usage on Facebook is the possibility to see the changing number of likes in real-time without reloading the page. Originally, React.JS was released back in 2011 by a Facebook engineer as a way to upscale and maintain the complex interface of the Facebook Ads app. The library’s high functionality resulted in its adoption by other SMEs and large corporations - now React JS is one of the most widely used development tools. How to Use React.JS? Depending on your HTML and JavaScript proficiency, it may take anywhere from a few days to months to get the hang of React. For the basic understanding of the library, take a look at React.JS features as well as the setup process. Getting started with React.JS To start working with React, a developer has to import React and React to DOM libraries using a basic HTML file. Now that you have set up a working space, take your time to examine the defining features of React.JS. Components All React.JS elements are components. Depending on the syntax, they are grouped into the class and functional ones. As, in most cases, both lead to equal outcomes, a React.JS beginner should start by learning functional components. Props Props are the way for React.JS developers to pass data from parent to child structures. Keep in mind that, unlike states, props are immutable under any circumstances. They provide developers with high code reusability as the same message will be displayed on all pages. At times, developers do want components to change themselves. That’s when states come in handy. States States are used when a developer wants the application data to change. The most common operations that have to do with states include: Initialization; Modification; Adding event handlers. These were the basic concepts a React.JS developer has to be familiar with to get the most out of the library. React.JS best practices If you’re already using React.JS, be sure to make the most out of it. Keep track of new trends and best practices in all facets of app management - accessibility, performance, security, and others. Here’s a short collection of React.JS development secret tips that’ll improve the maintenance and development efficiency. Performance: Consider using React.Fragment to avoid extra DOM nodes. To load components on-demand, use React.Lazy, along with React.Suspense. Another popular practice among JS developers is taking advantage of shouldComponentUpdate to avoid unnecessary rendering. Try to keep the JS code as clean as possible. For instance, delete the DOM components you don’t use with ComponentDidUnomunt (). For component caching, use React.Memo. Accessibility Pay attention to the casing and reserved word differences in HTML and React.js to avoid bottlenecks. To set up page titles, use the react-handle plugin to set up page titles. Don’t forget to put ALT-tags for any non-text content. Use ref() functions to pinpoint the focus on a given component. External tools like ESLint plugin help developers monitor accessibility. Debugging Use Chrome Dev Tools - there are dozens of features - reduct logger, error messages handler, and so on. Leave the console open while coding to detect errors faster. To have a better understanding of the code you’re dealing with, adopt a table view for objects. Other quick debugging hacks include marking DOM items to find them quickly in a Google Chrome Inspector. View full stack traces for functions. The bottom line Thanks to a powerful team of engineers at work, React.JS has quickly become a powerhouse for front end development. Its huge reliance on JavaScript makes a library easier to get to know. While React.JS pros and cons are extensive - however, the possibility to express UIs declaratively along with the promotion of functional components makes it a favorite framework for many. A wide variety of the projects it empowers and a large number of job openings prove that knowing React is no longer optional for developers. The good news, there’s no lack of learning tools and resources online. Take your time to explore the library - you’ll be amazed by the order and efficiency React brings to applications. Author Bio Anastasia Stefanuk is a passionate writer and a marketing manager at Mobilunity. The company provides professional staffing services, so she is always aware of technology news and wants to share her experience to help tech startups and companies to be up-to-date.   Getting started with React Hooks by building a counter with useState and useEffect React 16.9 releases with an asynchronous testing utility, programmatic Profiler, and more 5 Reasons to Learn ReactJS
Read more
  • 0
  • 0
  • 8455

article-image-streamline-your-application-development-process-in-5-simple-steps
Guest Contributor
23 Apr 2019
7 min read
Save for later

Streamline your application development process in 5 simple steps

Guest Contributor
23 Apr 2019
7 min read
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
Read more
  • 0
  • 0
  • 6670

article-image-the-amped-up-web-by-google
Amarabha Banerjee
23 Sep 2018
5 min read
Save for later

The AMPed up web by Google

Amarabha Banerjee
23 Sep 2018
5 min read
Google apparently wants all the web developers to adopt the AMP approach for their websites. The AMP project was announced by Google on October 7, 2015, and AMP pages first became available to web users in February 2016. Mobile search is more popular presently as compared to desktop search. It is important for web pages to appear in Google’s mobile search results, and this is why AMP is not optional for web publishers. Without AMP, a publisher’s articles will be extremely unlikely to appear in the Top Stories carousel on mobile search in Google. This means the developers will have two options for them, either to design the complete app in the AMP format, or have two formats ready, one as per their own design considerations, the other as per the Google AMP format. Does that really work for the developers? We will try to address that question here in this article. The trouble with Web content - Searchability and Indexing The searchability of your application is heavily dependent on the structure & format of your app. To be found on Google search is dependant on how easily Google can crawl and index your application. The main challenge for indexing is the vast nature of internet and the wide variety of applications that exist. The absence of a structure or a particular format makes the task of checking website content and categorizing them very difficult. This was the primary reason why Google had come up with the idea of Accelerated Mobile Pages. The purpose of adopting AMP is to make all web and mobile applications conform to a certain structure, so that they can be easily classified and categorized. Since the implementation of ‘mobile first’ approach - an approach that puts more emphasis on the mobile platform and UI considerations for mobile devices, the AMP way has been slowly becoming the most preferred way of app designing. But the real question here is are developers adopting this particular design thinking willingly or are they finding themselves running out of other options with Google forcing its hand on how they design their apps. The Ground Realities of the Web - Diversity vs Uniformity The truth is that the internet is a diverse playing ground. It’s a place for information sharing. As such, the general consensus is not exactly in line with Google’s vision of a uniform web. Google started off as a search engine whose main task was to be the gateway of information - to lead people to the specific web addresses. From there on, they have evolved to be one of the leading beneficiaries of the world wide web. The next step in Google’s evolution seems to be quite natural to take control over content and hosting. Google has also recently announced that they are going to lay down undersea internet cable from Japan to Guam, and from Guam to Australia. They are portraying this decision as an economic decision which will save them money eventually after the cables are laid. But some are seeing this as a step to remove external dependencies and as a step closer to total control over the internet. Google’s recent partnering deal with WordPress is a proof that Google is taking steps towards owning up the web hosting space. AMP specification means that Google will have the final say over design specifications. The diversity in design will suffer as you would not want to spend time to design a site that won’t be indexed by Google. Hence the developers will only have two options, use the pre-designed template provided by Google, or make two specific website designs, one as per their own design consideration and the other one as per AMP. But Google will keep showing you error signs if your AMP version doesn’t match the main design. Hence the choice finally narrows down to choosing AMP. The trouble with AMP Your content published using AMP is stored in a Google cache and hence repeated views are loaded from the cache. This also means that the user will actually spend more time in Google’s own page and will see Google’s ads and not the ones which the content creator had put up. This by extension means loss of revenue for the actual content creator. Using Analytics is far more difficult in AMP-based pages. The AMP pages are difficult to customize and hence difficult to design without looking similar. So the web might end up with similar looking apps with similar buttons and UIs all across. The AMP model takes its own decisions as per how it actually shows your content. So you don’t get to choose your metadata being displayed, but Google does. That means less control over your content. With Google controlling the extent to which your website data is displayed, all the pages are going to look similar with very little metadata info shown, fake stories will appear parallel to normal news thumbnails because there will be very little text displayed to enable to make a call, whether a story is true or false. All of these come with the caveat that AMPed up pages will rank higher on Google. If that’s the proverbial carrot used to lure web publishers to bring their content under Google’s umbrella, then we must say that it’s going to be a tricky choice for developers. No one wants a slow web with irregular indexing and erroneous search results. But how far are we prepared to let go of individuality and design thinking in this process, that’s a question to ponder about. Google wants web developers to embrace AMP. Great news for users, more work for developers. Like newspapers, Google algorithms are protected by the First Amendment Implementing Dependency Injection in Google Guice
Read more
  • 0
  • 0
  • 3094

article-image-why-is-everyone-going-crazy-over-webassembly
Amarabha Banerjee
09 Sep 2018
4 min read
Save for later

Why is everyone going crazy over WebAssembly?

Amarabha Banerjee
09 Sep 2018
4 min read
The history of web has seen a few major events in the past three decades. One of them was the launch of JavaScript 22 years ago on December 4, 1995.  Since then JavaScript has slowly evolved to become the de-facto standard of front-end web development. The present day web is much more dynamic and data intensive. Heavy graphics based games and applications require a much more robust browser.  That is why developers are going crazy over the concept of WebAssembly. Is it here to replace JavaScript? Or is it like any other hype that will fade away with time? The answer is neither of the two. Why use WebAssembly when you have JavaScript? To understand the buzz around WebAssembly, we will have to understand what JavaScript does best and what its limitations are. JavaScript compiles into machine code as it runs in the browser. Machine code is the language that communicates with the PC and instructs it what to do. Not only that, it also parses, analyzes, and optimizes the Emscripten-generated JavaScript while loading the application. That’s what makes the browser slow in compute heavy applications. JavaScript is a dynamically typed language. It doesn’t have any stored functions in advance. That’s why when the compiler in your browser runs JavaScript, it doesn’t know which function call is going to come next. That might seem very inconvenient. But that feature is what makes JavaScript based browsers so intuitive, and interactive. This feature ensures that your system would not have to install a standalone desktop application. The same application can be run from the browser. Graphical Representation of an Assembler-Source: logrocket The above image shows how an assembly level language is transformed into machine code when it is compiled. This is what exactly happens when WebAssembly code runs in browser. But since WebAssembly is in binary format, it becomes much easier for the compiler to convert it into machine code. Unfortunately JavaScript is not suitable for every single application. For example, gaming is an area, where running JavaScript code in the browser for a highly interactive multiplayer game is not the best solution. It takes a heavy toll on the system resources. That’s where WebAssembly comes in. WebAssembly is a low level binary language that runs parallel to JavaScript. Its biggest advantages are speed, portability and flexibility. The speed comes from the fact that Webassembly is in binary. JavaScript is a high level language. Compiling that to the machine code puts significant pressure on the JavaScript engine. Compared to that, WebAssembly binary files are much smaller in size (in Kb) and easy to execute and convert to machine code. Functioning of a WASM: Source: logrocket The code optimization in WebAssembly happens during the compilation of source code, unlike JavaScript. WebAssembly manages memory manually, just like in languages like C and C++, so there’s no garbage collection either. This enables code compiler performance similar to native code. You can also compile other languages like Rust, C, C++ into WASM format. This enables developers to run their native code in the browser without knowing much of JavaScript. WASM is not something that you can write as a code. It’s a format which is created from your native code, that transcompiles directly into machine code. This allows it to run parallel to HTML5, CSS and JavaScript code, giving you the taste of both worlds. So, is WebAssembly going to replace JavaScript? JavaScript is clearly not replaceable. Just that for heavy graphics/ audio/ AI based apps, a lot of function calls are made in the browser. This makes the browser slow. WebAssembly eases out this aspect. There are separate compilers that can turn your C, C++, Rust code into WASM code. These are then used in the browser as JavaScript objects. Since these are very small in size, they make the application fast. Support for WebAssembly has been rolled out by all major browsers. Majority of the world is using WebAssembly currently in their browsers. Until JavaScript capabilities improve, WebAssembly will work alongside Javascript to make your apps perform better and in making your browser interactive, intuitive and lightweight. Golang 1.11 rc1 is here with experimental port for WebAssembly! Unity switches to WebAssembly as the output format for the Unity WebGL build target Introducing Life: A cross-platform WebAssembly VM for decentralized Apps written in Go  Grain: A new functional programming language that compiles to Webassembly
Read more
  • 0
  • 0
  • 7096

article-image-why-use-mobx-for-state-management
Amarabha Banerjee
07 Aug 2018
3 min read
Save for later

Why use MobX for State Management?

Amarabha Banerjee
07 Aug 2018
3 min read
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
Read more
  • 0
  • 0
  • 3422

article-image-is-dart-programming-dead-already
Amarabha Banerjee
26 Jul 2018
3 min read
Save for later

Is Dart programming dead already?

Amarabha Banerjee
26 Jul 2018
3 min read
Dart is an open-source, object-oriented, general-purpose programming language developed by Google in 2011. Dart uses a 'C' style syntax and optionally transcompiles into JavaScript. It is used for both client side and server-side web development. Dart is also being used for Native and Cross-platform mobile development. In spite of all the capabilities that Dart possesses, there are few rumors about Dart heading nowhere? Are there any truth to these rumors? Through this article, we will see how Dart can turn the tide around with some key new projects and application areas that are being explored recently. But first, let's talk about its recent TIOBE ranking - the de-facto standard for gauging the popularity of programming languages. The latest rankings show Dart at the 24th spot out of the 50 languages that TIOBE tracks, behind languages like R, Delphi, even Swift which was released in 2014, 3 years later after Dart was introduced. Even languages like Delphi and R have seen a recent spike in implementation across various application domain. Codementor ranks Dart at #1 in the list of programming languages one should not learn in 2018. They looked at community engagement, growth, and the job market to arrive at this conclusion. Source: Codementor.io The job trends for Dart also have been quite stagnant for some time. After a minor dip in between 2015-16, the job trends are now back at the 2014 mark. There has been neither any growth nor decline. The major cause of concern for Dart has been that very few companies are using Dart in their development stack. Other than Google backed websites such as AdWords, Google Fiber, Flutter etc, only few other major companies like Workiva, Adobe, Blossom have actively implemented Dart. The Job listings are also similar in number as in 2014, the developer salaries are pretty high. The lack of sustained growth balances that advantage out. Google had also shifted to TypeScript as the official language for it’s most popular front-end development framework Angular. This was also seen as a minor setback for Dart. When compared to other late entrants like Swift, is this a sign of worry for Dart? Source: ITJobswatch.uk The answer is a definitely 'No'. The reason being Dart’s ease of use, lack of boilerplates and extremely lightweight nature. Developers have termed it as a language for the long run. These predictions got a major boost when Google recently announced their latest Cross-Platform mobile development framework, Flutter which was written in Dart. The reviews of Flutter has also been encouraging since it paves way for simpler and native like mobile apps. The popularity of Flutter could mean a revival of Dart in the mobile development scenario. But Google might have even bigger aspirations with Dart. Google might be thinking of a possible replacement of its flagship Android operating system which is bugged by irregular update cycles due to multiple instances of it running on different devices. Google is developing an operating system called Fuchsia which is also being written in Dart. All of these point out to one single direction, Dart is here to stay. If everything goes as per Google's vision, Fuchsia will bring Dart to the forefront of mobile development.   **edited for better clarity on Dart’s comparison to other languages like Swift, Delphi and R and elaborated on Dart’s real world use cases. Read Next Why Google Dart Will Never Win The Battle For The Browser Building Games with HTML5 and Dart Google Fuchsia: What’s all the fuss about?
Read more
  • 0
  • 3
  • 26611
Unlock access to the largest independent learning library in Tech for FREE!
Get unlimited access to 7500+ expert-authored eBooks and video courses covering every tech area you can think of.
Renews at €18.99/month. Cancel anytime
article-image-react-vs-vue-javascript-framework-wars
Amarabha Banerjee
17 Jul 2018
4 min read
Save for later

React vs. Vue: JavaScript framework wars

Amarabha Banerjee
17 Jul 2018
4 min read
Before I begin, one thing that needs to be established, is we can’t for a second ignore the fact that we are going to compare two different JavaScript frameworks - React and Vue. Both frameworks are clearly different in terms of popularity and usage. While ReactJS is a JavaScript library, great for building huge web applications where data can be updated on a regular basis. Vue.js is a JavaScript framework, fit for creating highly adaptable user interfaces and sophisticated Single-page applications. On the other hand, we all have mostly come across is how React and Vue are similar in their fundamental approach. They both have a virtual DOM based approach; they both have component based structure and are Reactive in their architecture. They both tend to work around a root library with all the other tasks transferred to other libraries. Having said that, as per npm trends report, React stands well ahead in terms of monthly downloads at 2.4 million whereas Vue stands joint second with Angular at around 239k downloads. Now that we have established the popularity of front end web development frameworks, it’s time to talk about what works and what doesn’t in React and Vue.js. Comparing React.js and Vue.js Template vs JSX While everything in React is a JavaScript code written in JSX syntax, Vue depends majorly on its templates which are HTML5 and CSS3 based. Now if you are a front end developer how can this possibly affect you? Well it depends on your choice of working methodology. If you want to write code on your own and control every aspect of your application, then the React way will be much more suitable for you. But if you want to start working on a readymade template and then add features as you go then Vue should be your best choice. React is a better framework if you want to scale up Make no mistake about this. The size and scalability of your application plays a determining role on your choice of framework. The fact that React gives you more control over your application architecture is the single most reason why it is easier in React to scale up your application. But since Vue is so much dependent inherently on the templating structure, it becomes tough when to build an industrial grade application made with Vue as changing the template can be difficult. It's easier to update data with Vue than React Updating data on Vue is much simpler. The middle stage of transpiling is not needed in Vue as it directly renders into the browser and hence the process is faster. Whereas in React, the data is analyzed, then stored, then the Document Object Model (DOM) is invoked and thereafter the change takes place, which is a time consuming process. React has a bigger community than Vue React is backed by Facebook. There are many similar libraries like React such as Preact which render support to React making it a  larger community than Vue. And with larger communities developers can expect faster resolution of issues and regular community support with timely updates. Building for mobile with React and Vue The capabilities of all modern day frameworks are often judged in terms of how they allow developers build for mobile. React has a world class companion in this domain: React Native. React Native is very similar to React in terms of its component structure, and is a fairly short learning curve for anyone already using React. The introduction of Vue Native, which offers a way of writing mobile applications with NativeScript using Vue, has made it easier for mobile developers to use Vue mobile development. Chinese tech company Alibaba has also created a cross platform framework called Weex. Weex has support for Vue, and while it doesn't yet have the capabilities of React Native, it could be a mobile framework to watch. Which is better? React or Vue? To summarize, there are different aspects of Vue and React which are useful and developer friendly. However if you intend to judge them on your own, you are better off assessing what your development needs are first? How big an issue scalability is going to be? Would you be needing something for the mobile platform too? Once you have figured out these questions, the choice should be easy. Read Next: What is React.js and how does it work Is React Native really a Native framework Using React Router for Client Side Redirecting
Read more
  • 0
  • 2
  • 4712

article-image-future-fetcher-context-api-replace-redux
Amarabha Banerjee
13 Jul 2018
3 min read
Save for later

Is Future-Fetcher/Context API replacing Redux?

Amarabha Banerjee
13 Jul 2018
3 min read
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
Read more
  • 0
  • 0
  • 4110

article-image-a-ux-strategy-is-worthless-without-a-solid-usability-test-plan
Sugandha Lahoti
15 Jun 2018
48 min read
Save for later

A UX strategy is worthless without a solid usability test plan

Sugandha Lahoti
15 Jun 2018
48 min read
A UX practitioner's primary goal is to provide every user with the best possible experience of a product. The only way to do this is to connect repeatedly with users and make sure that the product is being designed according to their needs. At the beginning of a project, this research tends to be more exploratory. Towards the end of the project, it tends to be more about testing the product. In this article, we explore in detail one of the most common methods of testing a product with users--the usability test. We will describe the steps to plan and conduct usability tests. Usability tests provide insights into how to practically plan, conduct, and analyze any user research. This article is an excerpt from the book UX for the Web by Marli Ritter, and Cara Winterbottom. This book teaches you how UX and design thinking can make your site stand out from the rest of the sites on the internet. Tips to maximize the value of user testing Testing with users is not only about making their experience better; it is also about getting more people to use your product. People will not use a product that they do not find useful, and they will choose the product that is most enjoyable and usable if they have options. This is especially the case with the web. People leave websites if they can't find or do things they want. Unlike with other products, they will not take time to work it out. Research by organizations such as the Nielsen Norman group generally shows that a website has between 5 and 10 seconds to show value to a visitor. User testing is one of the main methods available to us to ensure that we make websites that are useful, enjoyable, and usable. However, to be effective it must be done properly. Jared Spool, a usability expert, identified seven typical mistakes that people make while testing with users, which lessen its value. The following list addresses how not to make those mistakes: Know why you're testing: What are the goals of your test? Make sure that you specify the test goals clearly and concretely so that you choose the right method. Are you observing people's behavior (usability test), finding out whether they like your design (focus group or sentiment analysis), or finding out how many do something on your website (web analytics)? Posing specific questions will help to formulate the goals clearly. For example, will the new content reduce calls to the service center? Or what percentage of users return to the website within a week? Design the right tasks: If your testing involves tasks, design scenarios that correspond to tasks users would actually perform. Consider what would motivate someone to spend time on your website, and use this to create tasks. Provide participants with the information they would have to complete the tasks in a real-life situation; no more and no less. For example, do not specify tasks using terms from your website interface; then participants will simply be following instructions when they complete the tasks, rather than using their own mental models to work out what to do. Recruit the right users: If you design and conduct a test perfectly, but test on people who are not like your users, then the results will not be valid. If they know too much or too little about the product, subject area, or technology, then they will not behave like your users would and will not experience the same problems. When recruiting participants, ask what qualities define your users, and what qualities make one person experience the website differently to another. Then recruit on these qualities. In addition, recruit the right number of users for your method. Ongoing research by the Nielsen Norman group and others indicate that usability tests typically require about five people per test, while A/B tests require about 40 people, and card sorting requires about 15 people. These numbers have been calculated to maximize the return on investment of testing. For example, five users in a usability test have been shown by the Nielsen Norman group (and confirmed repeatedly by other researchers) to find about 85% of the serious problems in an interface. Adding more users improves the percentage marginally, but increases the costs significantly. If you use the wrong numbers then your results will not be valid or the amount of data that you need to analyze will be unmanageable for the time and resources you have available. Get the team and stakeholders involved: If user testing is seen as an outside activity, most of the team will not pay attention as it is not part of their job and easy to ignore. When team members are involved, they gain insights into their own work and its effectiveness. Try to get team members to attend some of the testing if possible. Otherwise, make sure everyone is involved in preparing the goals and tasks (if appropriate) for the test. Share the results in a workshop afterward, so everyone can be involved in reflecting on the results and their implications. Facilitate the test well: Facilitating a test well is a difficult task. A good facilitator makes users feel comfortable so they act more naturally. At the same time, the facilitator must control the flow of the test so that everything is accomplished in the available time, and not give participants hints about what to do or say. Make sure that facilitators have a lot of practice and constructive feedback from the team to improve their skills. Plan how to share the results: It takes time and skill to create an effective user testing report that communicates the test and results well. Even if you have the time and skill, most team members will probably not read the report. Find other ways to share results to those who need them. For example, create a bug list for developers using project management software or a shared online document; have a workshop with the team and stakeholders and present the test and results to them. Have review sessions immediately after test days. Iterate: Most user testing is most effective if performed regularly and iteratively; for testing different aspects or parts of the design; for testing solutions based on previous tests; for finding new problems or ideas introduced by the new solutions; for tracking changes to results based on time, seasonality, maturity of product or user base; or for uncovering problems that were previously hidden by larger problems. Many organizations only make provision to test with users once at the end of design, if at all. It is better to split your budget into multiple tests if possible. As we explore usability testing, each of these guidelines will be addressed more concretely. Planning and conducting usability tests Before starting, let's look at what we mean by a usability test, and describe the different types. Usability testing involves watching a representative set of users attempt realistic tasks, and collecting data about what they do and say. Essentially, a usability test is about watching a user interact with a product. This is what makes it a core UX method: it persuades stakeholders about the importance of designing for and testing with their users. Team members who watch participants struggle to use their product are often shocked that they had not noticed the glaringly obvious design problems that are revealed. In later iterations, usability tests should reveal fewer or more minor problems, which provides proof of the success of a design before launch. Apart from glaring problems, how do we know what makes a design successful? The definition of usability by the International Organization for Standardization (ISO) is: Extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use. This definition shows us the kind of things that make a successful design. From this definition, usability comprises: Effectiveness: How completely and accurately the required tasks can be accomplished. Efficiency: How quickly tasks can be performed. Satisfaction: How pleasant and enjoyable the task is. This can become a delight if a design pleases us in unexpected ways. There are three additional points that arise from the preceding points: Discoverability: How easy it is to find out how to use the product the first time. Learnability: How easy it is to continue to improve using the product, and remember how to use it. Error proneness: How well the product prevents errors and helps users recover. This equates to the number and severity of errors that users experience while doing tasks. These six points provide us with guidance on the kinds of tasks we should be designing and the kind of observations we should be making when planning a usability test. There are three ways of gathering data in a usability test--using metrics to guide quantitative measurement, observing, and asking questions. The most important is observation. Metrics allow comparison, guide observation, and help us design tasks, but they are not as important as why things happen. We discover why by observing interactions and emotional responses during task performance. In addition, we must be very careful when assigning meaning to quantitative metrics because of the small numbers of users involved in usability tests. Typically, usability tests are conducted with about five participants. This number has been repeatedly shown to be most effective when considering testing costs against the number of problems uncovered. However, it is too small for statistical significance testing, so any numbers must be reported carefully. If we consider observation against asking questions, usability tests are about doing things, not discussing them. We may ask users to talk aloud while doing tasks to help us understand what they are thinking, but we need the context of what they are doing. "To design an easy-to-use interface, pay attention to what users do, not what they say. Self-reported claims are unreliable, as are user speculations about future behavior." - Jakob Nielsen This means that usability tests trump questionnaires and surveys. It also means that people are notoriously bad at remembering what they did or imagining what they will do. It does not mean that we never listen to what users say, as there is a lot of value to be gained from a well-formed question asked at the right time. We must just be careful about how we understand it. We need to interpret what people say within the context of how they say it, what they are doing when they say it, and what their biases might be. For example, users tend to tell researchers what they think we want to hear, so any value judgment will likely be more positive than it should. This is called experimenter bias. Despite the preceding cautions, all three methods are useful and increase the value of a test. While observation is core, the most effective usability tests include tasks carefully designed around metrics, and begin and end with a contextual interview with the user. The interviews help us to understand the user's previous and current experiences, and the context in which they might use the website in their own lives. Planning a usability test can seem like a daunting task. There are so many details to work out and organize, and they all need to come together on the day(s) of the test. The following diagram is a flowchart of the usability test process. Each of the boxes represents a different area that must be considered or organized: However, by using these areas to break the task down into logical steps and keeping a checklist, the task becomes manageable. Planning usability tests In designing and planning a usability test, you need to consider five broad questions: What: What are the objectives, scope, and focus of the test? What fidelity are you testing? How: How will you realize the objectives? Do you need permissions and sign off? What metrics, tasks, and questions are needed? What are the hardware and software requirements? Do you need a prototype? What other materials will you need? How will you conduct the test? Who: How many participants and who will they be? How will you recruit them? What are the roles needed? Will team members, clients, and stakeholders attend? Will there be a facilitator and/or a notetaker? Where: What venue will you use? Is the test conducted in an internal or external lab, on the streets/in coffee shops, or in users' homes/work? When: What is the date of the test? What will the schedule be? What is the timing of each part? Documenting these questions and their answers forms your test plan. The following figure illustrates the thinking around each of these broad questions: It is important to remember that no matter how carefully you plan usability testing, it can all go horribly wrong. Therefore, have backup plans wherever you can. For example, for participants who cancel late or do not arrive, have a couple of spares ready; for power cuts, be prepared with screenshots so you can at least simulate some tasks on paper; for testing live sites when the internet connection fails, have a portable wireless router or cache pages beforehand. Designing the test - formulating goals and structure The first thing to consider when planning a usability test is its goal. This will dictate the test scope, focus, and tasks and questions. For example, if your goal is a general usability test of the whole website, the tasks will be based on the business reasons for the site. These are the most important user interactions. You will ask questions about general impressions of the site. However, if your goal is to test the search and filtering options, your tasks will involve finding things on the website. You will ask questions about the difficulty of finding things. If you are not sure what the specific goal of the usability test might be, think about the following three points: Scope: Do you want to test part of the design, or the whole website? Focus: Which area of the website will you focus on? Even if you want to test the whole website, there will be areas that are more important. For example, checkout versus contact page. Behavioral questions: Are there questions about how users behave, or how different designs might impact user behavior, that are being asked within the organization? Thinking about these questions will help you refine your test goals. Once you have the goals, you can design the structure of the test and create a high-level test plan. When deciding on how many tests to conduct in a day and how long each test should be, remember moderator and user fatigue. A test environment is a stressful situation. Even if you are testing with users in their own home, you are asking them to perform unfamiliar tasks with an unfamiliar system. If users become too tired, this will affect test results negatively. Likewise, facilitating a test is tiring as the moderator must observe and question the user carefully, while monitoring things like the time, their own language, and the script. Here are details to consider when creating a schedule for test sessions: Test length: Typically, each test should be between 60 and 90 minutes long. Number of tests: You should not be facilitating more than 5-6 tests in one day. When counting the hours, leave at least half an hour cushioning space between each test. This gives you time to save the recording, make extra notes if necessary, communicate with any observers, and it provides flexibility if participants arrive later or tests run longer than they should. Number of tasks: This is roughly the number of tasks you hope to include in the test. In a 60-minute test, you will probably have about 40-45 minutes for tasks. The rest of the time will be taken with welcoming the participant, the initial interview, and closing questions at the end. In 45 minutes, you can fit about 5-8 tasks, depending on the nature of the tasks. It is important to remember that less is more in a test. You want to give participants time to explore the website and think about their options. You do not want to be rushing them on to the next task. The last thing to consider is moderating technique. This is how you interact with the participant and ask for their input. There are two aspects: thinking aloud and probing. Thinking aloud is asking participants to talk about what they are thinking and doing so you can understand what is in their heads. Probing is asking participants ad-hoc questions about interesting things that they do. You can do both concurrently or retrospectively: Concurrent thinking aloud and probing: Here, the participant talks while they do tasks and look at the interface. The facilitator asks questions as they come up, while the participant is doing tasks. Concurrent probing interferes with metrics such as time on task and accuracy, as you might distract users. However, it also takes less test time and can deliver more accurate insights, as participants do not have to remember their thoughts and feelings; these are shared as they happen. Retrospective thinking aloud and probing: This involves retracing the test or task after it is finished and asking participants to describe what they were thinking in retrospect. The facilitator may note down questions during tasks, and ask these later. While retrospective techniques simulate natural interaction more closely, they take longer because tasks are retraced. This means that the test must be longer or there will be fewer tasks and interview questions. Retrospective techniques also require participants to remember what they were thinking previously, which can be faulty. Concurrent moderating techniques are preferable because of the close alignment between users acting and talking about those actions. Retrospective techniques should only be used if timing metrics are very important. Even in these cases, concurrent thinking aloud can be used with retrospective probing. Thinking aloud concurrently generally interferes very little with task times and accuracy, as users are ideally just verbalizing ideas already in their heads. At each stage of test planning, share the ideas with the team and stakeholders and ask for feedback. You may need permission to go forward with test objectives and tasks. However, even if you do not need sign off, sharing details with the team gets everyone involved in the testing. This is a good way to share and promote design values. It also benefits the test, as team members will probably have good ideas about tasks to include or elements of the website to test that you have not considered. Designing tasks and metrics As we have stated previously, usability testing is about watching users interacting with a product. Tasks direct the interactions that you want to see. Therefore, they should cover the focus area of the test, or all important interactions if the whole website is tested. To make the test more natural, if possible create scenarios or user stories that link the tasks together so participants are performing a logical sequence of activities. If you have scenarios or task analyses from previous research, choose those that relate to your test goals and focus, and use them to guide your task design. If not, create brief scenarios that cover your goals. You can do this from a top-down or bottom-up perspective: Top down: What events or conditions in their world would motivate people to use this design? For example, if the website is a used goods marketplace, a potential user might have an item they want to get rid of easily, while making some money; or they might need an item and try to get it cheaply secondhand. Then, what tasks accomplish these goals? Bottom up: What are the common tasks that people do on the website? For example, in the marketplace example, common tasks are searching for specific items; browsing through categories of items; adding an item to the site to sell, which might include uploading photographs or videos, adding contact details and item descriptions. Then, create scenarios around these tasks to tie them together. Tasks can be exploratory and open-ended, or specific and directed. A test should have both. For example, you can begin with an open-ended task, such as examining the home page and exploring the links that are interesting. Then you can move onto more directed tasks, such as finding a particular color, size, and brand of shoe and adding it to the checkout cart. It is always good to begin with exploratory tasks, but these can be open-ended or directed. For example, to gather first impressions of a website, you could ask users to explore as they prefer from the home page and give their impressions as they work; or you could ask users to look at each page for five seconds, and then write down everything they remember seeing. The second option is much more controlled, which may be necessary if you want more direct comparison between participants, or are testing with a prototype where only parts of the website are available. Metrics are needed for task, observation, and interview analysis, so that we can evaluate the success of the design we are testing. They guide how we examine the results of a usability test. They are based on the definition of usability, and so relate to effectiveness, efficiency, satisfaction, discoverability, learnability, and error proneness. Metrics can be qualitative or quantitative. Qualitative metrics aim to encode the data so that we can detect patterns and trends in it, and compare the success of participants, tasks, or tests. For example, noting expressions of delight or frustration during a task. Quantitative metrics collect numbers that we can manipulate and compare against each other or benchmarks. For example, the number of errors each participant makes in a task. We must be careful how we use and assign meaning to quantitative metrics because of the small sample sizes. Here are some typical metrics: Task success or completion rates: This measures effectiveness and should always be captured as a base. It relates most closely to conversion, which is the primary business goal for a website, whether it is converting browsers to buyers, or visitors to registered users. You may just note success or failure, but it is more revealing to capture the degree of task success. For example, you can specify whether the task is completed easily, with some struggle, with help, or is not completed successfully. Time on task: A measure of efficiency. How long it takes to complete tasks. Errors per task: A measure of error-proneness. The number and severity of errors per task, especially noting critical errors where participants may not even realize they have made a mistake. Steps per task: A measure of efficiency. A number of steps or pages needed to complete each task, often against a known minimum. First click: A measure of discoverability. Noting the first click to accomplish each task, to report on findability of items on the web page. This can also be used in more exploratory tasks to judge what attracts the user's attention first. When you have designed tasks, consider them against the definition of usability to make sure that you have covered everything that you need or want to cover. The preceding diagram shows the metrics typically associated with each component of the usability definition. A valid criticism of usability testing is that it only tests first-time use of a product, as participants do not have time to become familiar with the system. There are ways around this problem. For example, certain types of task, such as search and browsing, can be repeated with different items. In later tasks, participants will be more familiar with the controls. The facilitator can use observation or metrics such as task time and accuracy to judge the effect of familiarity. A more complicated method is to conduct longitudinal tests, where participants are asked to return a few days or a week later and perform similar tasks. This is only reasonable to spend time and money on if learnability is an important metric. Planning questions and observation The interview questions that are asked at the beginning and end of a test provide valuable context for user actions and reactions, such as the user's background, their experiences with similar websites or the subject-area, and their relationship to technology. They also help the facilitator to establish rapport with the user. Other questions provide valuable qualitative information about the user's emotional reaction to the website and the tasks they are doing. A combination of observation and questions provides data on aspects such as ease of use, usefulness, satisfaction, delight, and frustration. For the initial interview, questions should be about: Welcome: These set the participant at ease, and can include questions about the participant's lifestyle, job, and family. These details help UX practitioners to present test participants as real people with normal lives when reporting on the test. Domain: These ask about the participant's experience with the domain of the website. For example, if the website is in the domain of financial services, questions might be around the participant's banking, investments, loans, and their experiences with other financial websites. As part of this, you might investigate their feelings about security and privacy. Tech: These questions ask about the participant's usage and experience with technology. For example, for testing a website on a computer, you might want to know how often the participant uses the internet or social media each day, what kinds of things they do on the internet, and whether they buy things online. If you are testing mobile usage, you might want to inquire about how often the participant uses the internet on their phone each day, and what kind of sites they visit on mobile versus desktop. Like tasks, questions can be open-ended or closed. An example of an open-ended question is: Tell me about how you use your phone throughout a normal workday, beginning with waking up in the morning and ending with going to sleep at night. The facilitator would then prompt the participant for further details suggested during the reply. A closed question might be: What is your job? These generate simple responses, but can be used as springboards into deeper answers. For example, if the answer is fireman, the facilitator might say, That's interesting. Tell me more about that. What do you do as a fireman? Questions asked at the end of the test or during the test are more about the specific experience of the website and the tasks. These are often made more quantifiable by using a rating scale to structure the answer. A typical example is a Likert scale, where participants specify their agreement or disagreement with a statement on a 5- to 7-point scale. For example, a statement might be: I can find what I want easily using this website. #1 is labeled Strongly Agree and #7 is labelled Strongly Disagree. Participants choose the number that corresponds to the strength of their agreement or disagreement. You can then compare responses between participants or across different tests. Examples of typical questions include: Ease of use (after every task): On a scale of 1-7, where 1 is really hard and 7 is really easy, how difficult or easy did you find this task? Ease of use (at the end): On a scale of 1-7, how easy or difficult did you find working on this website? Usefulness: On a scale of 1-7, how useful do you think this website would be for doing your job? Recommendation: On a scale of 1-7, how likely are you to recommend this website to a friend? It is important to always combine these kinds of questions with observation and task performance, and to ask why afterwards. People tend to self-report very positively, so often you will pay less attention to the number they give and more to how they talk about their answer afterwards. The final questions you ask provide closure for the test and end it gracefully. These can be more general and conversational. They might deliver useful data, but that is not the priority. For example, What did you think of the website? or Is there anything else you'd like to say about the website? Questions during the test often arise ad hoc because you do not understand why the participant does an action, or what they are thinking about if they stare at a page of the website for a while. You might also want to ask participants what they expect to find before they select a menu item or look at a page. In preparing for observation, it is helpful to make a list of the kinds of things you especially want to observe during the test. Typical options are: Reactions to each new page of the website First reactions when they open the Home page The variety of steps used to complete each task Expressions of delight or frustration Reactions to specific elements of the website First clicks for each task First click off the Home page Much of what you want to observe will be guided by the usability test objectives and the nature of the website. Preparing the script Once you have designed all the elements of the usability test, you can put them together in a script. This is a core document in usability testing, as it acts as the facilitator's guide during each test. There are different ideas about what to include in a script. Here, we describe a comprehensive script that describes the whole test procedure. This includes, in rough order: The information that must be told to the participant in the welcome speech. The welcome speech is very important, as it is the participant's first experience of the facilitator. It is where the rapport will first be established. The following information may need to be included: Introduction to the facilitator, client, and product. What will happen during the test, including the length. The idea that the website is being tested, not the participant, and that any problems are the fault of the product. This means the participant is valuable and helpful to the team developing a great website. Asking the participant to think aloud as much as possible, and to be honest and blunt about what they think. Asking them to imagine that they are at home in a natural situation, exploring the website. If there are observers, indication that people may be watching and that they should be ignored. Asking permission to record the session, and telling the participant why. Assuring them of their privacy and the limited usage of the recordings to analysis and internal reporting. A list of any documents that the participant must look at or sign first, for example, an NDA. Instructions on when to switch on and off any recording devices. The questions to ask in thematic sections, for example, welcome, domain, and technology. These can include potential follow - on questions, to delve for more information if necessary. A task section, that has several parts: An introduction to the prototype if necessary. If you are testing with a prototype, there will probably be unfinished areas that are not clickable. It is worth alerting participants so they know what to expect while doing tasks and talking aloud. Instructions on how to use the technology if necessary. Ideally your participants should be familiar with the technology, but if this is not the case, you want to be testing the website, not the technology. For example, if you are testing with a particular screen reader and the participant has not used it before, or if you are using eye tracking technology. An introduction to the tasks, including any scenarios provided to the participant. The description of each task. Be careful not to use words from the website interface when describing tasks, so you do not guide the participant too much. For example, instead of: How would you add this item to your cart?, say How would you buy this item? Questions to include after each task. For example, the ease of use question. Questions to prompt the participant if they are not thinking aloud when they should, especially for each new page of the website or prototype. For example: What do you see here? What can you do here? What do you think these options mean? Final questions to finish off the test, and give the participant a chance to emphasize any of their experiences. A list of any documents the participant must sign at the end, and instructions to give the incentive if appropriate. Once the script is created, timing is added to each task and section, to help the facilitator make sure that the tests do not run over time. This will be refined as the usability test is practiced. The script provides a structure to take notes in during the test, either on paper or digitally: Create a spreadsheet with rows for each question and task Use the first column for the script, from the welcome questions onwards Capture notes in subsequent columns for the user Use a separate spreadsheet for each participant during the test After all the tests, combine the results into one spreadsheet so you can easily analyze and compare The following is a diagram showing sections of the script for notetaking, with sample questions and tasks, for a radio station website: Securing a venue and inviting clients and team members If you are testing at an external venue, this is one of the first things you will need to organize for a usability test, as these venues typically need to be booked about one-two months in advance. Even if you are testing in your own offices, you will still need to book space for the testing. When considering a test venue, you should be looking for the following: A quiet, dedicated space where the facilitator, participant, and potentially a notetaker, can sit. This needs surfaces for all the equipment that will be used during the test, and comfortable space for the participant. Consider the lighting in the test room. This might cause glare if you are testing on mobile phones, so think about how best to handle the glare. For example, where the best place is for the participant to sit, and whether you can use indirect lighting of some kind. A reception room where participants can wait for their testing session. This should be comfortable. You may want to provide refreshments for participants here. Ideally, an observation room for people to watch the usability tests. Observers should never be in the same space as the testing, as this will distract participants, and probably make them uncomfortable. The observation room should be linked to the test room, either with cables or wirelessly, so observers can see what is happening on the participant's screen, and hear (and ideally see) the participant during the test. Some observation rooms have two-way mirrors into the test room, so observers can watch the facilitator and participant directly. Refreshments should be available for the observers. We have discussed various testing roles previously. Here, we describe them formally: Facilitator: This is the person who conducts the test with the participant. They sit with the participant, instruct them in the tasks and ask questions, and take notes. This is the most important role during the test. We will discuss it further in the Conducting usability tests section. Participant: This is the person who is doing the test. We will discuss recruiting test participants in the next section. Notetaker: This is an optional role. It can be worth having a separate notetaker, so the facilitator does not have to take notes during the test. This is especially the case if the facilitator is inexperienced. If there is a notetaker, they sit quietly in the test room and do not engage with the participant, except when introduced by the facilitator. Receptionist: Someone must act as receptionist for the participants who arrive. This cannot be the facilitator, as they will be in the sessions. Ask a team member or the office receptionist to take this role. Observers: Everyone else is an observer. These can be other team members and/or clients. Observers should be given guidelines for their behavior. For example, they should not interact with test participants or interrupt the test. They watch from a separate room, and should not be too noisy so that they can be heard in the test room (often these rooms are close to each other). The facilitator should discuss the tests with observers between sessions, to check if they have any questions they would like added to the test, and to discuss observations. It is worth organizing a debriefing for immediately after the tests, or the next day if possible, for the observers and facilitator to discuss the tests and observations. It is important that as many stakeholders as possible are persuaded to watch at least some of the usability testing. Watching people using your designs is always enlightening, and really helps to bring a team together. Remember to invite clients and team members early, and send reminders closer to the day. Recruiting participants When recruiting participants for usability tests, make sure that they are as close as possible to your target audience. If your website is live and you have a pool of existing users, then your job is much easier. However, if you do not have a user pool, or you want to test with people who have not used your site, then you need to create a specification for appropriate users that you can give to a recruiter or use yourself. To specify your target audience, consider what kinds of people use your website, and what attributes will cause them to behave differently to other users. If you have created personas during previous research, use these to help identify target user characteristics. If you are designing a website for a client, work with them to identify their target users. It is important to be specific, as it is difficult to look for people who fulfill abstract qualities. For example, instead of asking for tech savvy people, consider what kinds of technology such people are more likely to use, and what their activities are likely to be. Then ask for people who use the technology in the ways you have identified. Consider the behaviors that result from certain types of beliefs, attitudes, and lifestyle choices. The following are examples of general areas you should consider: Experience with technology: You may want users who are comfortable with technology or who have used specific technology, for example, the latest smartphones, or screen readers. Consider the properties that will identify these people. For example, you can specify that all participants must own a specific type or generation of mobile device, and must have owned it for at least two months. Online experience: You may want users with a certain level and frequency of internet usage. To elicit this, you can specify that you want people who have bought items online within the last few months, or who do online banking, or have never done these things. Social media presence: Often, you want people who have a certain amount of social media interaction, potentially on specific platforms. In this case you would specify that they must regularly post to or read social media such as Facebook, Twitter, Instagram, Snapchat, or more hobbyist versions such as Pinterest and/or Flickr. Experience with the domain: Participants should not know too much or too little about the domain. For example, if you are testing banking software, you may want to exclude bank employees, as they are familiar with how things work internally. Demographics: Unless your target audience is very skewed, you probably want to recruit a variety of people demographically. For example, a range of ages, gender ethnicity, economic, and education levels. There may be other characteristics you need in your usability test participants. The previous characteristics should give you an idea of how to specify such people. For example, you may want hobbyist photographers. In this case, you would recruit people who regularly take photographs and share them with friends in some way. Do not use people who you have previously used in testing, unless you specifically need people like this, as they will be familiar with your tests and procedures, which will interfere with results. Recruiting takes time and is difficult to do well. There are various ways of recruiting people for user testing, depending on your business. You may be able to use people or organizations associated with your business or target audience members to recruit people using the screening questions and incentives that you give them. You can set up social media lists of people who follow your business and are willing to participate. You can also use professional recruiters, who will get you exactly the kinds of people you need, but will charge you for it. For most tests, an incentive is usually given to thank participants for their time. This is often money, but it can also be a gift, such as stationery or gift certificates. A recruitment brief is the document that you give to recruiters. The following are the details you need to include: Day of the test, the test length, and the ideal schedule. This should state the times at which the first and last participants may be scheduled, how long each test will take, and the buffer period that should be between each session. The venue. This should include an address, maps, parking, and travel information. Contact details for the team members who will oversee the testing and recruitment. A description of the test that can be given to participants. The incentives that will be provided. The list of qualities you need in participants, or screening questions to check for these. This document can be modified to share with less formal recruitment associates. The benefit of recruiters is that they handle the whole recruitment process. If you and your team recruit participants yourselves, you will need to remind them a week before the test, and the day before the test, usually by messaging or emailing them. On the day of the test, phone participants to confirm that they will be arriving, and that they know how to get to the venue. Participants still often do not attend tests, even with all the reminders. This is the nature of testing with real people. Ideally you will be given some notice, so try to recruit an extra couple of possible participants who you can call in a pinch on the day. Setting up the hardware, software, and test materials Depending on the usability test, you will have to prepare different hardware, software, and test materials. These include screen recording software and hardware, notetaking hardware, the prototype to test, screen sharing options, and so on. The first thing to consider is the prototype, as this will have implications for hardware and software. Are you testing a live website, an electronic prototype, or a paper prototype? Live website: Set up any accounts or passwords that may be necessary. Make sure you have reliable access to the internet, or a way to cache the website on your machine if necessary. Electronic prototype: Make sure the prototype works the way it is supposed to, and that all the parts that are accessed during the tasks can be interacted with, if required. Try not to make it too obvious which parts work and which parts do not work, as this may guide participants to the correct actions during the test. Be prepared to talk participants through parts of the prototype that do not work, so they have context for the tasks. Have a safe copy of the prototype in case this copy becomes corrupted in some way. Paper prototype: Make sure that you have sketches or printouts of all the screens that you need to complete the tasks. With paper prototype testing, the facilitator takes the role of the computer, shows the results of the actions that the participant proposes, and talks participants through the screens. Make sure that you are prepared for this and know the order of the screens. Have multiple copies of the paper prototype in case parts get lost or destroyed. For any of the three, make sure the team goes through the test tasks to make sure that everything is working the way it should be. For hardware and other software, keep an equipment list, so you can check it to make sure you have all the necessary hardware with you. You may need to include: Hardware for participant to interact with the prototype or live site: This may be a desktop, laptop, or mobile device. If testing on a mobile device, you can ask participants to use their own familiar phones instead of an unfamiliar test mobile device. However, participants may have privacy issues with using their own phones, and you will not be able to test the prototype or live site on the phone beforehand. If you provide a laptop, include a separate mouse as people often have difficulty with unfamiliar mouse pads. Recording the screen and audio: This is usually screen capture software. There are many options for screen capturing software, such as Lookback, an inexpensive option for iOS and Android, and CamStudio, a free option for the PC. Specialist software that handles multiple camera inputs allows you to record face and screen at the same time. Examples are iSpy, free CCTV software, Silverback, an inexpensive option for the Mac, and Morae, an expensive but impressive option for the PC. Mobile recording alternative: You can also record mobile video with an external camera that captures the participant's fingers on screen. This means you do not have to install additional software on the phone, which might cause performance problems. In this case, you would use a document camera attached to the table, or a portable rig with a camera containing the phone and attached to a nearby PC. The video will include hesitations and hovering gestures, which are useful for understanding user behavior, but fingers might occlude the screen. In addition, rigs may interfere with natural usage of the mobile phone, as participants must hold the rig as well as the phone. Observer viewing screen: This is needed if there are observers. The venue might have screen sharing set up; if not, you will have to bring your own hardware and software. This could be an external monitor and extension cables to connect to a laptop in the interview room. It could also be screen sharing software, for example, join.me. Capturing notes: You will need a method to capture notes. Even if you are screen recording, notes will help you to review the recordings more efficiently, and remind you about parts of the recording you wanted to pay special attention to. One method is using a tablet or laptop and spreadsheet. Typing is fast and the electronic notes are easy to put together after the tests. An alternative is paper and pencil. The benefit of this is that it is least disruptive to the participant. However, these notes must be captured electronically. Camera for participant face: Capturing the participant's face is not crucial. However, it provides good insight into their feelings about tasks and questions. If you don't record face, you will only have tone of voice and the notes that were taken to remind you. Possible methods are using a webcam attached to the computer doing screen recording, or using inbuilt software such as Hangouts, Skype, or FaceTime for Apple devices. Microphone: Often sound quality is not great on screen capturing software, because of feedback from computer equipment. Using an external microphone improves the quality of sound. Wireless router: A portable wireless router in case of internet problems (if you are using the internet). Extra extension cables and chargers for all devices. You will also need to make sure that you have multiple copies of all documents needed for the testing. These might include: Consent form: When you are testing people, they typically need to give their permission to be tested. You also typically need proof that the incentive has been received by the participant. These are usually combined into a form that the participant signs to give their permission and acknowledge receipt of the incentive. Non-disclosure agreement (NDA): Many businesses require test participants to sign NDAs before viewing the prototype. This must be signed before the test begins. Test materials: Any documents that provide details to the participants for the test. Checklists: It is worth printing out your checklists for things to do and equipment, so that you can check them off as you complete actions, and be sure that you have done everything by the time it needs to be done. The following figure shows a basic sample checklist for planning a usability test. For a more detailed checklist, add in timing and break the tasks down further. These refinements will depend on the specific usability test. Where you are uncertain about how long something will take, overestimate. Remember that once you have fixed the day, everything must be ready by then. Checklist for usability test preparation Conducting usability tests On the day(s) of the usability test, if you have planned properly, all you should have to worry about are the tests themselves, and interacting with the participants. Here is a list of things to double-check on the day of each test: Before the first test: Set up and check equipment and rooms. Have a list of participants and their order. Make sure there are refreshments for participants and observers. Make sure you have a receptionist to welcome participants. Make sure that the prototype is installed or the website is accessible via the internet and working. Test all equipment, for example, recording software, screen sharing, and audio in observations room. Turn off anything on the test computer or device that might interfere with the test, for example, email, instant messaging, virus scans, and so on. Create bookmarks for any web pages you need to open. Before each test: Have the script ready to capture notes from a new participant. Have the screen recorder ready. Have the browser open in a neutral position, for example, Google search. Have sign sheets and incentive ready. Start screen sharing. Reload sample data if necessary, and clear the browser history from the last test. During each test: Follow the script, including when the participant must sign forms and receive the incentive. Press record on the screen recorder. Give the microphone to the participant if appropriate. After each test: Stop recording and save the video. Save the script. End screen sharing. Note extra details that you did not have time for during the session. Once you have all the details organized, the test session is in the hands of the facilitator. Best practices for facilitating usability sessions The facilitator should be welcoming and friendly, but relatively ordinary and not overly talkative. The participant and website should be the focus of the interview and test, not the facilitator. To create rapport with the participant, the facilitator should be an ally. A good way to do this is to make fun of the situation and reassure participants that their experiences in the test will be helpful. Another good technique is to ask more like an apprentice than an expert, so that the participant answers your questions, for example: Can you tell me more about how this works? and What happens next?. Since you want participants to feel as natural and comfortable as possible in their interactions, the facilitator should foster natural exploration and help satisfy participant curiosity as much as possible. However, they need to remain aware of the script and goals of the test, so that the participant covers what is needed. Participants often struggle to talk aloud. They forget to do so while doing tasks. Therefore, the facilitator often needs to nudge participants to talk aloud or for information. Here are some useful questions or comments: What are you thinking? What do you think about that? Describe the steps you're doing here. What's going on here? What do you think will happen next? Is that what you expected to happen? Can you show me how you would do that? When you are asking questions, you want to be sure that you help participants to be as honest and accurate as possible. We've previously stated that people are notoriously bad at projecting what they will do or remembering what they did. This does not mean that you cannot ask about what people do. You must just be careful about how you ask and always try to keep it concrete. The priorities in asking questions are: Now: Participants talking aloud about what they are doing and thinking now. Retrospective: Participants talking about what they have done or thought in the past. Never prospective: Never ask participants about what they would do in the future. Rather ask about what they have done in similar situations in the past. Here are some other techniques for ensuring you get the best out of the participants, and do not lead them too much yourself: Ask probing questions such as why and how to get to the real reasons for actions. Do not assume you know what participants are going to say. Check or paraphrase if you are not sure what they said or why they said it. For example, So are you saying the text on the left is hard to read? or You're not sure about what? or That picture is weird? How? Do not ask leading questions, as people will give positive answers to please you. For example, do not say Does that make sense?, Do you like that? or Was that easy? Rather say Can you explain how this works? What do you think of that? and How did you find doing that task? Do not tell participants what they are looking at. You are trying to find out what they think. For example, instead of Here is the product page, say Tell me what you see here, or Tell me what this page is about. Return the question to the participant if they ask what to do or what will happen: I can't tell you because we need to find out what you would do if you were alone at home. What would you normally do? or What do you think will happen? Ask one question at a time, and make time for silence. Don't overload the participants. Give them a chance to reply. People will often try to fill the silence, so you may get more responses if you don't rush to fill it yourself. Encourage action, but do not tell them what to do. For example, Give it a try. Use acknowledgment tokens to encourage action and talking aloud. For example, OK, uh huh, mm hmm. A good facilitator makes participants feel comfortable and guides them through the tasks without leading while observing carefully and asking questions where necessary. It takes practice to accomplish this well. The facilitator (and the notetaker if there is one) must also think about the analysis that will be done. Analysis is time-consuming; think about what can be done beforehand to make it easier. Here are some pointers: Taking notes on a common spreadsheet with a script is helpful because the results are ready to be combined easily. If you are gathering quantitative results, such as timing tasks or counting steps to accomplish activities, prepare spaces to note these on the spreadsheet before the test, so all the numbers are easily accessible afterward. If you are rating task completion, then note a preliminary rating as the task is completed. This can be as simple as selecting appropriate cell colors beforehand and coloring each cell as the task is completed. This may change during analysis, but you will have initial guidance. Listen for useful and illustrative quotes or video segment opportunities. Note down the quote or roughly note the timestamp, so you know where to look in the recording. In general, have a timer at hand, and note the timestamp of any important moments in each test. This will make reviewing the recordings easier and less time-consuming. We examined how to plan, organize, and conduct a usability test. As part of this, we have discussed how to design a test with goals, tasks, metrics, and questions using the definition of usability. If you liked this article, be sure to check out this book UX for the Web  to make a web app fully accessible from a development and design perspective. 3 best practices to develop effective test automation with Selenium Unit Testing in .NET Core with Visual Studio 2017 for better code quality Unit Testing and End-To-End Testing
Read more
  • 0
  • 0
  • 5118

article-image-voice-natural-language-and-conversations-are-they-the-next-web-ui
Sugandha Lahoti
08 Jun 2018
5 min read
Save for later

Voice, natural language, and conversations: Are they the next web UI?

Sugandha Lahoti
08 Jun 2018
5 min read
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
Read more
  • 0
  • 0
  • 3594
article-image-what-are-web-developers-favorite-front-end-tools-packts-skill-up-report-reveals-all
Sugandha Lahoti
06 Jun 2018
5 min read
Save for later

What are web developers favorite front-end tools? Packt’s Skill Up report reveals all

Sugandha Lahoti
06 Jun 2018
5 min read
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
Read more
  • 0
  • 0
  • 4143

article-image-5-reasons-why-your-next-app-should-be-a-pwa-progressive-web-app
Sugandha Lahoti
24 Apr 2018
3 min read
Save for later

5 reasons why your next app should be a PWA (progressive web app)

Sugandha Lahoti
24 Apr 2018
3 min read
Progressive Web Apps (PWA) are a progression to web apps and native apps. So you get the experience of a native app from a mobile’s browser. They take up less storage space (the pitfall of native apps) and reduce loading time (the main reason why people leave a website). In the past few years, PWA has taken everything that is great about a native app – the functionality, touch gestures, user experience, push notifications – and transferred it into a web browser. Antonio Cucciniello’s article on ‘What is PWA?’ highlights some of their characteristics with details on how they affect you as a developer. Many companies have already started with their PWAs and are reaping benefits of this reliable, fast, and engaging approach. Twitter, for instance, introduced Twitter Lite and achieved 65% increase in pages per session, 75% increase in Tweets sent and 20% decrease in bounce rate. Lancôme has rebuilt their mobile website as a PWA and increased conversions by 17%. Most recently, George.com, a leading UK clothing brand, after upgrading their site to a Progressive Web App, saw a 31% increase in mobile conversion. Still not convinced? Here are 5 reasons why your next app should be a Progressive Web App. PWAs are device-agnostic What this means is that PWAs can work with various systems without requiring any special adaptations. As PWAs are hosted online, they are hyper-connected and work across all devices.  Developers will no longer need to develop multiple apps across multiple mobile platforms meaning huge savings in app development time and effort. PWAs have a Seamless UX The user experience provided by a PWA across different devices is the same. You could use a PWA on your phone,  switch to a tablet and notice no difference. They offer a complete full-screen experience with help from a web app manifest file. Smooth animations, scrolling, and navigation keep the user experience smooth.Additionally, Web push notifications show relevant and timely notifications even when the browser is closed, making it easy to re-engage with users. PWAs are frictionless Native apps take a lot of time to download. With a PWA, users won’t have to wait to install and download the app. PWAs use Service Workers and Javascript separately from the main thread to allow apps to load near instantly and reliably no matter the kind of network connection. Moreover, PWAs have improved app cross-functionality. So switching between apps, and sharing information between them becomes less intrusive. The user experience is faster and more intuitive. PWAs are secure PWAs are secured using HTTPS. HTTPS secures the connection between a PWA and the user-base by preventing intruders from actively tampering with the communications between your PWA and your users’ browsers. It also prevents intruders from being able to passively listen to communications between your PWA and your users. PWAs have better SEO According to a report, over 60 percent of searches now occur on mobile devices. This makes PWA very powerful from an SEO perspective as a simple google search might pull up your website and then launch the visitor into your PWA. PWAs can be indexed easily by search engines, making them more likely to appear in search results. The PWA fever is on and as long as PWAs increase app functionality and offer more offline capabilities, the list of reasons to consider them will only grow. Perhaps even more than a native app. Read More Windows launches progressive web apps… that don’t yet work on mobile 5 things that will matter in web development in 2018  
Read more
  • 0
  • 0
  • 5480

article-image-what-is-react-js-how-does-it-work
Packt
05 Mar 2018
9 min read
Save for later

What is React.js and how does it work?

Packt
05 Mar 2018
9 min read
What is React.js? React.js is one of the most talked about JavaScript web frameworks in years. Alongside Angular, and more recently Vue, React is a critical tool that has had a big impact on the way we build web applications. But it's hard to find a better description of React.js than the single sentence on the project's home page: A JavaScript library for building user interfaces. It's a library. For building user interfaces. This is perfect because, more often than not, this is all we want. The best part about this description is that it highlights React's simplicity. It's not a mega framework. It's not a full-stack solution that's going to handle everything from the database to real-time updates over web socket connections. We don't actually want most of these pre-packaged solutions, because in the end, they usually cause more problems than they solve. Facebook sure did listen to what we want. This is an extract from React and React Native by Adam Boduch. Learn more here. React.js is just the view. That's it. React.js is generally thought of as the view layer in an application. You might have used library like Handlebars, or jQuery in the past. Just as jQuery manipulates UI elements, or Handlebars templates are inserted onto the page, React components change what the user sees. The following diagram illustrates where React fits in our frontend code. This is literally all there is to React. We want to render this data to the UI, so we pass it to a React component which handles the job of getting the HTML into the page. You might be wondering what the big deal is. On the surface, React appears to be another rendering technology. But it's much more than that. It can make application development incredibly simple. That's why it's become so popular. React.js is simple React doesn't have many moving parts for us to learn about and understand. The advantage to having a small API to work with is that you can spend more time familiarizing yourself with it, experimenting with it, and so on. The opposite is true of large frameworks, where all your time is devoted to figuring out how everything works. The following diagram gives a rough idea of the APIs that we have to think about when programming with React. React is divided into two major APIs. First, there's the React DOM. This is the API that's used to perform the actual rendering on a web page. Second, there's the React component API. These are the parts of the page that are actually rendered by React DOM. Within a React component, we have the following areas to think about: Data: This is data that comes from somewhere (the component doesn't care where), and is rendered by the component. Lifecycle: These are methods that we implement that respond to changes in the lifecycle of the component. For example, the component is about to be rendered. Events: This is code that we write for responding to user interactions. JSX: This is the syntax of React components used to describe UI structures. Don't fixate on what these different areas of the React API represent just yet. The takeaway here is that React is simple. Just look at how little there is to figure out! This means that we don't have to spend a ton of time going through API details here. Instead, once you pick up on the basics, you can spend more time on nuanced React usage patterns. React has a declarative UI structure React newcomers have a hard time coming to grips with the idea that components mix markup in with their JavaScript. If you've looked at React examples and had the same adverse reaction, don't worry. Initially, we're all skeptical of this approach, and I think the reason is that we've been conditioned for decades by the separation of concerns principle. Now, whenever we see things mixed together, we automatically assume that this is bad and shouldn't happen. The syntax used by React components is called JSX (JavaScript XML). The idea is actually quite simple. A component renders content by returning some JSX. The JSX itself is usually HTML markup, mixed with custom tags for the React components. What's absolutely groundbreaking here is that we don't have to perform little micro-operations to change the content of a component. For example, think about using something like jQuery to build your application. You have a page with some content on it, and you want to add a class to a paragraph when a button is clicked. Performing these steps is easy enough, but the challenge is that there are steps to perform at all. This is called imperative programming, and it's problematic for UI development. While this example of changing the class of an element in response to an event is simple, real applications tend to involve more than 3 or 4 steps to make something happen. Read more: 5 reasons to learn React React components don't require executing steps in an imperative way to render content. This is why JSX is so central to React components. The XML-style syntax makes it easy to describe what the UI should look like. That is, what are the HTML elements that this component is going to render? This is called declarative programming, and is very well-suited for UI development. Time and data Another area that's difficult for React newcomers to grasp is the idea that JSX is like a static string, representing a chunk of rendered output. Are we just supposed to keep rendering this same view? This is where time and data come into play. React components rely on data being passed into them. This data represents the dynamic aspects of the UI. For example, a UI element that's rendered based on a Boolean value could change the next time the component is rendered. Here's an illustration of the idea. Each time the React component is rendered, it's like taking a snapshot of the JSX at that exact moment in time. As our application moves forward through time, we have an ordered collection of rendered user interface components. In addition to declaratively describing what a UI should be, re-rendering the same JSX content makes things much easier for developers. The challenge is making sure that React can handle the performance demands of this approach. Performance matters with React Using React to build user interfaces means that we can declare the structure of the UI with JSX. This is less error-prone than the imperative approach to assembling the UI piece by piece. However, the declarative approach does present us with one challenge—performance. For example, having a declarative UI structure is fine for the initial rendering, because there's nothing on the page yet. So the React renderer can look at the structure declared in JSX, and render it into the browser DOM. This is illustrated below. On the initial render, React components and their JSX are no different from other template libraries. For instance, Handlebars will render a template to HTML markup as a string, which is then inserted into the browser DOM. Where React is different from libraries like Handlebars is when data changes, and we need to re-render the component. Handlebars will just rebuild the entire HTML string, the same way it did on the initial render. Since this is problematic for performance, we often end up implementing imperative workarounds that manually update tiny bits of the DOM. What we end up with is a tangled mess of declarative templates, and imperative code to handle the dynamic aspects of the UI. We don't do this in React. This is what sets React apart from other view libraries. Components are declarative for the initial render, and they stay this way even as they're re-rendered. It's what React does under the hood that makes re-rendering declarative UI structures possible. React has something called the virtual DOM, which is used to keep a representation of the real DOM elements in memory. It does this so that each time we re-render a component, it can compare the new content, to the content that's already displayed on the page. Based on the difference, the virtual DOM can execute the imperative steps necessary to make the changes. So not only do we get to keep our declarative code when we need to update the UI, React will also make sure that it's done in a performant way. Here's what this process looks like: When you read about React, you'll often see words like diffing and patching. Diffing means comparing old content with new content to figure out what's changed. Patching means executing the necessary DOM operations to render the new content React.js has the right level of abstraction React.js doesn't have a great deal of abstraction, but the abstractions the framework does implement are crucial to its success. In the preceding section, you saw how JSX syntax translates to the low-level operations that we have no interest in maintaining. The more important way to look at how React translates our declarative UI components is the fact that we don't necessarily care what the render target is. The render target happens to be the browser DOM with React. But this is changing. We're only just starting to see this with React Native, but the possibilities are endless. I personally will not be surprised when React Toast becomes a thing, targeting toasters that can singe the rendered output of JSX on to bread. The abstraction level with React is at the right level, and it's in the right place. The following diagram gives you an idea of how React can target more than just the browser. From left to right, we have React Web (just plain React), React Native, React Desktop, and React Toast. As you can see, to target something new, the same pattern applies: Implement components specific to the target Implement a React renderer that can perform the platform-specific operations under the hood Profit This is obviously an oversimplification of what's actually implemented for any given React environment. But the details aren't so important to us. What's important is that we can use our React knowledge to focus on describing the structure of our user interface on any platform. Disclaimer: React Toast will probably never be a thing, unfortunately.
Read more
  • 0
  • 0
  • 13044
article-image-is-novelty-ruining-web-development
Antonio Cucciniello
17 Jan 2018
5 min read
Save for later

Is novelty ruining web development?

Antonio Cucciniello
17 Jan 2018
5 min read
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.
Read more
  • 0
  • 0
  • 2875

article-image-10-tools-that-will-improve-your-development-workflow
Owen McGab
15 Jan 2018
6 min read
Save for later

10 tools that will improve your web development workflow

Owen McGab
15 Jan 2018
6 min read
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.
Read more
  • 0
  • 0
  • 8087