0

I am currently making an html-based editor, i know there are lots of editors out there especially html based but i want to do it myself once. What i am concerned about is, for e.g, when a user press a key, following operations will happen.

  • check if some text in the editor is already selected, if selected delete that text first. and push this action in undo stack.
  • input this character which also includes manipulating the array and then re rendering the line.

Now these two tasks alone can include so many function calls, like deletion alone will check which text is selected then it delete that text which will manipulate the arrays and re-render the lines and so on.

If I break down this code into a readable form, there are lots of function calls on just a key press and u know user does not have to just press on key, if I dont break the code into a readable form this will make the complex and a lot of code will be repeated. What is the good practice ? to make the code more complex and have less function calls or to make the code readable and have more functions ?

migrated from stackoverflow.com Jun 10 '18 at 21:14

This question came from our site for professional and enthusiast programmers.

  • 3
    More functions and readable code! sites.google.com/site/unclebobconsultingllc/… – CertainPerformance Jun 10 '18 at 21:02
  • @CertainPerformance it is a performance bottleneck, though i understand ur point. and i myself write a code in a more readable way. – Mamoon Ahmed Jun 10 '18 at 21:05
  • 2
    If performance is a serious issue (wasn't mentioned in your question), then you may have to sacrifice some readability - but in most cases, performance isn't worth considering. – CertainPerformance Jun 10 '18 at 21:08
  • 1
    The number of functions and readability are not that closely related. You could for a class structure, or behaviors composed out of functions. – S.D. Jun 11 '18 at 4:19
  • 1
5

Every time you should try to make code as readable as possible. Modern compilers can optimize code to make it more or less as fast as possible so you don’t have to think about it. Or if it is needed, you can optimize it later once your algorithm is written and understandable. Always remember, code is written once, but read many many times... There are many books regarding this topic, but my favourite is Clean Code by Robert C. Martin. He has also a wonderful blog at https://blog.cleancoder.com/ Hope this helps!

  • 1
    I like this answer but it's missing some critical points. Optimization shouldn't just be flat out ignored. It should be put off until a test shows it's needed. – candied_orange Jun 10 '18 at 21:32
  • i also have a question, does your answer also applies to the javascript vm like node in chrome ? or firefox ? – Mamoon Ahmed Jun 10 '18 at 22:11
  • @candied_orange yes, I have changed it now, in general, you should start optimizing the code once it is at least functional and understandable and only if it is needed. – Xenon Jun 11 '18 at 6:22
  • @MamoonAhmed In general, yes, it applies to all compilers, VMs etc. But some compilers do it in better ways than others of course :) – Xenon Jun 11 '18 at 6:23
  • @candied_orange Simple, straightforward code is very often the best optimised because it avoids unnecessary work. That kind of optimisation should be there from the start. – gnasher729 Jun 11 '18 at 7:56
1

Readable code, and the right number of functions. More or fewer functions doesn’t affect readability, deviating from the right number does.

In your editor, avoid special casing. Don’t write code for pressing a key. Write code for replacing an arbitrary range of text with an arbitrary new range of text. It’s difficult. The code for it will be difficult. But that’s only once.

0

I would recommend you to consider separation of concerns principle, which will make your code readable and without side effects as much as possible.

deletion alone will check which text is selected then it delete that text which will manipulate the arrays and re-render the lines and so on

all these operations ideally should be atomic. If you are familiar with reactive programming, your task could be solved like this:

keyUpStream$
.map(findSelection)
.map(removeText)

editorChange$
.do(takeHistorySnapshot)
.do(render)

these functions should be atomic, and you can use them to build other handlers as well. And as you see, it is clean and readable.

And I would suggest you to take a look at how such problem is solved by other editors, like codemirror for instance https://github.com/codemirror/codemirror there are interesting take aways.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.