Hi Habr, I want to tell you about my new project for estimating online SmetaCloud.

Aims and Tasks

The main goal of the Estimated Cloud project is to provide a convenient service for drawing up estimates and collaborating on documents using only a computer with Internet access.
')

Who is suitable for estimate

SmetaCloud is great for small construction organizations and individual entrepreneurs, who make up a small amount of construction documentation and use their prices for budgeting.

What SmetaCloud differs from competitors

There are many software packages on the market for budget programs that offer desktop solutions for budgeting, only a few developers suggest using terminal access, but this method is too expensive in terms of server resource consumption, which leads to a restriction on simultaneous use of the product.

Architecturally, SmetaCloud is a unique solution on the market for budget programs and is completely written using web technologies.

What SmetaCloud is already able to do

SmetaCloud is in beta testing and now offers users the following features:

• Creating documents with estimates
• Creation of tables with quotations (sections) of local budget
• Add, delete, edit local budget rates
• Maintain a personal database of user rates and add them to the estimates
• Print / Export Document to PDF

Edited in the browser document is fully consistent with what will be printed. By the way, you can print the result directly from the browser using the button:

What's inside?

Now I would like to share some of the technical details and difficulties that I had to face when developing the Estimated Cloud.

Since the appearance of the document is a set of tables, the first difficulty was solving the problems related to performance. As you know, the html table element is very heavy for the browser, and when the number of such elements becomes large, the responsiveness of the interface greatly deteriorates due to an increase in the time to reflow (recompiling).

The second problem was the inability of browsers to correctly print tabular documents. If the table row does not fit on the page, then it should be completely transferred to the next, and not be torn where it wants.



To date, only Opera (before switching to webkit) supported the CSS rule:

tr { page-break-inside: avoid; } 

The rest of browsers strictly adhere to the CSS2 specification and apply this rule only to block elements. There are a lot of questions about solving this problem on SO, but browser developers are not in a hurry to solve it, this bug has been dragging on the webkit since 2005.

Both of these problems had to be solved by a fairly well-known hack that works in all browsers, starting with IE8:

 .cloud-dt-thead, .cloud-dt-tfoot, .cloud-dt-rowgroup { page-break-inside: avoid; } .cloud-dt-cell { display: table-cell; } <div class=”cloud-dt-table”> <div class=”cloud-dt-thead”></div> <div class=”cloud-dt-tfoot”></div> <div class=”cloud-dt-data”> <div class=”cloud-dt-rowgroup”> <div class=”cloud-dt-row”> <div class=”cloud-dt-cell”></div> </div> </div> </div> </div> 

When forming tables using this approach, two problems described above are solved at once. For the browser, such a table becomes much “easier”, which makes it possible to use them in a large, but still reasonable amount on one page. When printing such tables, there is no longer an unexpected line break somewhere in the middle, and a line or a whole block of lines is transferred to the next page if there is not enough space.

The approach described above is used not only for the tables that form the structure of the estimated document, but also for ordinary tables, for example, the table of rates for the personal database.



I want to emphasize how important it is to monitor how the work with the DOM is implemented with a large number of elements on the page. There are many ways to trigger a reflow , which leads to poor responsiveness of the entire application interface. Ideally, each user action should not take more than one reflow. This also applies to the correct description of CSS selectors, since browsers read them in Arabic (right to left), then an incorrectly composed selector of the type:

 .my-widget div .my-widget-body * { height: 100% } 

can significantly reduce the speed of the web page

Browser Support

Currently only webkit browsers are fully supported, but if you log in via IE8, you can also work a little.

Future plans

First I would like to get feedback and understand in which direction to move on, and then add new features and capabilities, including:

• Add more types of documents (Certificate of Completion (COP-2), Certificate of Cost of Completed Works (COP-3) and, possibly, the creation of individual documents for specific user needs)
• Shared access to the document with the ability to edit multiple users
• Versioning of the document. Undo / Redo to return and cancel actions
• Offline version with the ability to synchronize with the web version (using node-webkit)

www.smetacloud.ru
Demo version
User's manual

If you have questions, suggestions, or someone may want to join the project, write: support@smetacloud.ru