TinyMCE
MoxieManager
DrivePRODUCT LED GROWTH
Buy vs Build: Spell Check feature cost estimate
Published February 10th, 2022
Isn’t it nice to be right? Even when it’s something as simple as spelling a word… correctly? That feeling often correlates with a desire to be accurate, trustable and credible – all things that a spell checker can do for you and your business.
Di Mace
Communications Specialist at Tiny
Why is being accurate important? In his lab at Stanford University, respected Behavioral Scientist, BJ Fogg, researches how website and phone design can impact customers. He’s applied his findings to companies like eBay (to improve customer service) and Nike (to help simplify its sports technology line), as well as the alumni of Silicon Valley.
Often, it’s your website that’s the first point of contact for customers, therefore it’s responsible for first impressions and (in many cases) is the main source of revenue. Fogg’s research defined four types of credibility: presumed, reputed, surface and earned.
He’s shown that your web credibility comes from a website that’s trustworthy and knowledgeable. And it should come as no surprise that a common example of destroying your hard ‘earned’ credibility, is typos and other grammatical errors on your site. When they’re noticed, people have one of two reactions:
- They’re immediately recognized and it turns off their desire and interest
- They’re subtle errors that slowly damage your credibility through the copy you publish.
What’s the answer? An advanced spell checker. Its main benefit is its accuracy – it catches and corrects errors.
In an advanced spell checker, that same benefit spans multiple languages (either within the same document or separate ones), which is a must-have if you’re working within a global market.
The tool usually consists of two sections: one that allows the spell checker to scan through a block of text and highlight misspelled words, and another that uses an algorithm to compare the words used/typed, with the thousands of correctly spelled words in the dictionary built into the software.
But what’s involved in building a best-in-class, feature rich spell checker? And how much would that cost… versus buying a third-party component and assembling it as part of your tech stack? Let’s find out.
What does an advanced spell checker do?
An advanced, feature rich spell checker needs to simplify and streamline the process of checking and correcting text errors – ideally across multiple languages simultaneously, in the one document.
At its most basic level, the tool splits a document into words and checks them against a dictionary (relevant to the language chosen) for spelling errors. It functions in a similar way to the tools in both Word and GDocs, but it does not check either syntax or grammar. A more advanced spell checking tool allows you to check the spelling of multiple languages within the same document – something that’s crucial for apps that work with multiple languages.
Complexities of building a spell checking feature
Building a spell checker probably sounds relatively easy… it’s only either right or wrong spelling, isn’t it? Often though, it requires both a client and server side piece. You therefore need to consider:
- Building the UI
– Choosing between as-you-type highlights under words (which can then be right clicked to bring up a menu), and/or a dialog that steps through each spelling error in the document and offers the user suggestions for fixing it, or to enter their own replacement.
– Supporting user dictionary formats (if required).
– Developers also need to allow for users to:
- skip words
- mark things as correctly spelled anyway
- give them the ability to add words to a custom dictionary.
- Checking words
– There's the complexity of figuring out how to check enough words at a time, so that the user can go through errors at a good pace without needing to wait for more to be checked.
– The whole document can’t all be checked at once, because the number of requests that could be simultaneously sent would be ridiculously large and users would experience delays (waiting for them all to come back) which would deliver a poor UX.
– Therefore, spell check requests need to be batched together so that the solution is performant.
- Overall, the document needs to be traversed efficiently to find spelling errors without:
– Locking up the page
– Taking too long (for a reasonably-sized document)
– Sending a million requests to the server and overwhelming the network.
- Handling oddities in network requests, like:
– Receiving responses from the server in a different order to how they were sent out
– Missing responses
– Duplicate responses.
- Dealing with multiple languages (if your environment requires that), both when the entire document is in one language and when different sections are in different languages.
– Deciding how many languages you need to support now and if extended support is likely needed in the future.
- Debugging problems given that you are managing the privacy of customer content
What functionality is crucial to an advanced spell checker?
An advanced spell checker has both client and server side parts, where:
- The client side tokenizes content to send it to the server to be checked, and handles UI and DOM interaction
- The server side checks words and sends suggestions back to the client.
Each area has specific functionality requirements.
Client-side:
- Properly tokenizing the words for various languages.
- Handling text fragmentation and inline tag nesting.
- Skipping spell checking on things that users don't want to spellcheck (links etc.).
- Multi-language support and language attribute boundaries.
- Menu positioning and general menus for error suggestions, as well as handling edges of the screen.
- Handling different numbers of simultaneous suggestions.
- Providing a clean UI for marking errors and offering suggestions.
- Responsive as-you-type highlighting so that users can correct a word before they go too far away from it.
- Some way to perform a spell check across a large document that helps the user know they have no spelling errors left.
- Cursor / selection management – this is more for a content-editable based HTML editor. It's imperative that the cursor position isn't broken when the document is changed by a spelling marker being added. Spelling processes are often asynchronous, which adds complexities and many issues with undo management and cursor management.
- Splitting up words by tag boundaries rather than always whitespace. There might be no whitespace between things, but if they’re in different blocks, it's the equivalent of whitespace – you can't just rely on text content.
- Undo management can be tricky – because of the asynchronous nature of requests, and because pressing undo recreates all the nodes in the document, you can't just "store a reference" to the word you need to add the spelling marker to, because the reference will become stale. In most cases, you need to find it again.
Client and server-side:
- Full-document spell checking without slowing down the editor experience.
Server-side:
- Adding custom dictionaries that can be further customized for your brand or industry.
PREFER USING APIs?
Check out our APIs for these premium plugin/features:
What expertise is required to build an effective and compliant spell checker?
- Expertise in DOM traversal and manipulation.
- An understanding of text nodes, cursors, viewport, etc. and how to handle them.
- Ability to complete UI creation, including dialogs, word underlines, context menus, etc.
- A server side developer to set up a spelling service.
- An understanding of how to handle network requests between the client and server side, and how to optimize for performance, particularly at scale (i.e. lots of clients connecting to one service).
As you can see, building your own spell checker isn’t quite as easy as it seems on the surface, let alone keeping up with adding new dictionaries/languages, spelling updates, new words, and other oddities.
Cost Estimate for an Advanced RTE Spell Checking Feature
Building an advanced feature like a spell checker, doesn’t start and end with the development and building phase. It also requires ongoing maintenance and extensibility work through the life of the feature.
In practical use, it should feature both:
- As-you-type spell checking (which underlines misspelled words which can be right-clicked to bring up a context menu to correct them).
- Dialog-based spell checking (which scans the document, opens a dialog, and lets users click through each misspelling to handle each one).
Both modes offer suggestions for correct spelling, the ability to ignore a word (e.g. if it’s currently misspelled), and to handle multiple languages – both at a document level and with different languages within one document. An advanced spell checker also needs to be optimized in many ways to ensure the UI is responsive, that the network load is minimized and it has the ability to add custom dictionaries.
All of these complexities and interactions need to be factored into the total cost of ownership (TCO) of the plugin.
COST ESTIMATE CURRENCY
All cost estimates quoted are in US$
This includes development/build work, maintenance and extensibility work
Build/Development – 1 x RTE Spell Checking Feature Cost Estimate (excl. core editor)
Using a normalized COCOMO Model, the estimated engineering requirements for building an advanced spell checking, using:
- A Senior Software Engineer
- Average salary rate (US$128,749** p/yr excluding oncosts, RSUs and bonuses)
- 10,874 lines of code (front end)
- 5,477 lines of code (backend)
TOTAL LOC = 16,351
- 63.5 person-months = 13.7months, using six developers
- Excluding ongoing maintenance and extensibility work
EQUALS = $681,466 in development cost
Advanced RTE Feature COCOMO Modeling
Software Development (Elaboration and Construction)
Effort
63.5 person-months
Schedule
13.7 months
Cost
$681,466
total equivalent size
16351 SLOC
effort adjustment factor (EAF)
1.00
Acquisition Phase Distribution
| Phase | Effort | Schedule | Average Staff | Cost |
|---|---|---|---|---|
| Inception | 3.8 | 1.7 | 2.2 | $40888 |
| Elaboration | 15.2 | 5.2 | 3.0 | $163552 |
| Construction | 48.3 | 8.6 | 5.6 | $517915 |
| Transition | 7.6 | 1.7 | 4.4 | $81776 |
It should be noted that the above $681K estimate for a single advanced spell checking feature, excludes the additional support costs required for the development of a product ready feature:
A full time Senior Product Manager***
- During the Inception/Discovery Phase
- Throughout the 13.7 months of the project
A full time Senior Product Designer****
- 1 week during the project
Curious about the cost of building your
own rich text editor?
Read the total cost breakdown in: Buy vs Build White Paper
Cliffnotes: Tiny puts price tag on building your own rich text editor
Plus, get the cost breakdown of building, maintaining
and extending advanced features:
Ongoing Maintenance – 1 x RTE Spell Checking Feature Cost Estimate (excl. core editor)
Engineering time and resources are required to both maintain and evolve the feature to keep pace with market, feature and related plugin changes.
For maintenance work, expect to dedicate a minimum of:
| CLIENT | SERVER |
|---|---|
| 85 full time work days (2.8 months) per year, every year of the plugin’s life, of Senior Software Engineer** resources, to keep the spell check feature afloat. | 30 full time work days (1.0 months) per year, every year of the plugin’s life, of Senior Software Engineer** resources, to keep the spell check feature afloat. |
| Average salary rate (US$128,749** p/yr excluding oncosts, RSUs and bonuses) or $10,729.08 per person-month | Average salary rate (US$128,749** p/yr excluding oncosts, RSUs and bonuses) or $10,729.08 per person-month |
| $30,041.42 per year | $10,729.08 |
This work would include bug fixes, other tasks and various required maintenance.
TOTAL = $40,770** yearly in maintenance cost for a single feature, ongoing
PLUS
- A full time Senior Product Manager*** throughout any maintenance work.
- A full time Senior Product Designer**** sporadically during maintenance work.
What maintenance work is likely to be required?
- Patching the HTTP libraries that get a security vulnerability (this happens more frequently than you'd imagine).
- Sourcing and updating dictionary files for various languages.
- Fixes for edge cases or bugs as introduced by other rich text editing features.
The additional ongoing maintenance, infrastructure and QA requirements for all rich text editor advanced features, include:
- Continual testing and keeping development infrastructure up to date. This is the biggest consumer of engineering time and cost, to ensure the engineering team avoids the accumulation of technical debt (due to dependencies not being kept up to date and having to constantly play catchup).
- Having sufficient licensing across all supported platforms (eg all the versions of MSWord, for testing)
- Balancing the prioritization of plugin maintenance over primary features (productivity vs core product revenue).
Long-term Extensibility – 1 x RTE Spell Checking Feature Cost Estimate (excl. core editor)
Extensibility work isn’t always easy to predict or plan. However, the one certainty is that users will demand feature upgrades and extended functionality, as new technologies continue to develop.
For extensibility work, expect to dedicate a minimum of:
| CLIENT | SERVER |
|---|---|
| 30 full time work days (1.0 months) per year, every year of the plugin’s life, of Senior Software Engineer** resources, to account for larger changes. | 13 full time work days (0.5 months) per year, every year of the plugin’s life, of Senior Software Engineer** resources, to account for larger changes. |
| Average salary rate (US$128,749** p/yr excluding oncosts, RSUs and bonuses) or $10,729.08 per person-month | Average salary rate (US$128,749** p/yr excluding oncosts, RSUs and bonuses) or $10,729.08 per person-month |
| $10,729.08 per year | $5,364.54 |
This extensibility work includes feature requests and extensions and well as maintaining pace with market developments and changes in user needs.
TOTAL = $16,084** in extensibility cost for this single feature, annually ongoing
PLUS
- A full time Senior Product Manager*** throughout any extensibility work.
- A full time Senior Product Designer**** sporadically during extensibility work.
What extension work is likely to be required?
- Staying ahead of new words being added to each language and dictionary.
- Customisation options where users require specific modifications or a setting to give them more control (eg. the batch size of network requests).
TOTAL COST ESTIMATE for an RTE Spell Checking Feature (excl. core editor)
- $681,466 build/development cost
- $40,777 p/yr in maintenance cost, ongoing
- $16,094 annually in extensibility cost, ongoing
$738,337 TOTAL COST
Note: All estimates exclude on-costs, RSUs and bonuses
* Using the Basic COCOMO Model (Accessed 1 July 2022)
**Average base salary for a Senior Software Engineer is US$128,749 per year in Silicon Valley, CA
*** Estimated base salary for a Senior Product Manager is US$157,340 per year in Silicon Valley, CA
****Estimated base salary for a Senior Product Designer is US$145,700 per year in Silicon Valley, CA
(All salary rates accessed 1 July 2022)
A person-month is equivalent to approximately 160 hours of labor, and is the amount of work performed by a single average worker in one month (ie. 12 person-month project will take 4 developers 3 months work to finish). A person-year is the total effort in person-months divided by twelve, to estimate the project length in years.
Comparing spell checking plug-ins
When comparing spell checkers across the various rich text editors, not all of their features are deemed to be equal. Here’s a comprehensive breakdown undertaken across all the spell checking capabilities of three popular editors, to see the one that works best for a specific use case: Under Pressure – SpellChecker Pro
Comparing rich text editors
Choosing a rich text editor (RTE) to use within your SaaS product, web application, CMS, LMS, email marketing or internal workspace, isn’t a simple decision. Here’s comprehensive side-by-side comparison of key rich text editors (updated twice yearly):
TinyMCE Alternatives: WYSIWYG Editors Competitive Overview
Froala vs TinyMCE | Why TinyMCE is the Best Froala Alternative
TinyMCE vs Quill | Why TinyMCE is the Best Quill Alternative
TinyMCE vs Tiptap | Why TinyMCE is the Best Tiptap Alternative
TinyMCE vs Slate | Why TinyMCE is the Best Slate Alternative
TinyMCE vs CKEditor | Why TinyMCE is the Best CKEditor Alternative
Download the white paper:
The Great Debate: Buy vs. Build
Rich Text Editors
By completing and submitting the form you’ll receive information and tips from Tiny Technologies.
Related Articles
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.