A few weeks ago, we interviewed the developer of Stateless Components. Today, we will chat with the developer working on another major ZK 10 advancement: Client MVVM.
James has been working in the team since 2014. He typically works on developing core ZK and ZK add-ons.
📢What was the starting point in the development of Client MVVM?
James: MVVM is a design pattern separating the data and logic from the presentation, which helps to reduce the code complexity. Since it was first out in ZK 6, it has been a major feature beloved by our users.
However, as time passed, we noticed that some users with bigger projects suffered from heavy memory usage. We’ve made different efforts to enhance the server MVVM to address this concern.
📢Did you have this idea right from the beginning? Or did you also evaluate other ideas?
James: The server-side improvement we did was good, but we wanted something more significant, and that’s when we turned into client MVVM. It took us some time to find the appropriate JavaScript libraries: in the very beginning, we considered React and Redux. These two libraries can handle states, expressions, and variables. Later we found Mobx. After evaluating and comparing the options, we found Mobx the best candidate; it is simpler, lighter, and more powerful.
📢Can you tell us about the POC process?
James: The core requirement is to replicate the server MVVM behavior to the client side while keeping the users’ upgrade effort as low as possible.
We spent about two months ensuring that the client library could be used to implement the client-side version of ZK MVVM. We started with key items like load-save, expression evaluation, etc.
📢What are some of the difficulties that you came across in the development process?
James: The life cycle of the server-side Components and the client-side Widgets are very different. This makes it quite challenging to move the MVVM logic from the server to the client. For example, ZK shadow elements is a template engine that helps developers compose the html layout with dynamic data. However, this mechanism was available only on the server-side.
To achieve the target – effortless upgrade, we had to redesign a client version of the shadow elements and ensure that it works the same as the server version. The redesign itself, as well as the verification process (unit tests, integration tests, etc), was intense.
📢What are the most common scenarios one would want to use this feature?
James: It can be used against all ZK MVVM pages, as it helps to reduce the MVVM memory usage. However, it is most efficient if you use it on: pages with massive load bindings or save bindings and pages visited by many concurrent users.
📢Is it also for existing projects? What are the steps for upgrade?
James: Yes, the steps to upgrade to Client MVVM are easy: include the required library, add the listeners, and apply it to the ViewModel. You can follow this small talk for details.
📢Should we use it globally or can we use it partially? Can we mix it with existing projects?
James: Yes, you can use it globally or partially, and yes you can mix it with existing projects. Again, please check our small talk.
📢What are some of the limitations?
Under the MVVM pattern, one should not access the components from the server side directly. However, practically we are seeing users still accessing the components directly or mixing MVC with MVVM. Now, with the new client MVVM, the server side does not have the complete and most up-to-date information, so you can’t access and control those child components as a server-side component. Also, it won’t work when you are mixing MVC and MVVM.
Another thing I’d like to mention is that IE11 will not be supported as the underlying Mbox5 library is incompatible with IE11 (note: Microsoft ended the support for IE11 on June 15, 2022, anyway).
📢What about MVC? Why are you only optimizing MVVM?
James: ZK server MVVM saves a lot of tracking bindings on the server side for you, and that is why it is heavier. MVC is quite simple and doesn’t save the binding for you; therefore, there is no need to optimize ZK MVC.
📢How would you expect users to use this feature? What kind of feedback are you looking for?
James: I hope that users find the client MVVM upgrade easy and see a real improvement in performance and memory use. If you see good improvements, please let us know. Please also let us know if there’s anything we didn’t cover.
📢Thank you for sharing today! Can you tell us what you think is important as a good developer?
James: I think it is important to keep learning and improving technical skills. This can be done by reading tech articles, taking online courses, and doing side projects. Also, I believe it is crucial to be open-minded – always open to new ideas, suggestions, and feedback.
We hope you find this interview interesting. If you have not checked out this new stateless feature, please try it and give us your feedback! Learn more about the Feedback Event.
