I've started looking at Blazor, and as I've built up some common Blazor Components, I've started to realise that I'm still unclear about a few design considerations. Theres not a great deal of guidance out there at the moment, and from what I have read it seems that the guidance/best practice will be put together from developers initial experience.
So these are the questions that are still niggling at me
Use of JavaScript.
Is JavaScript to be avoid as much as possible, I've read (and can understand why) modifying the DOM with JS could cause problems, and there are still a number of holes in the API that can only be solved with JS (setting focus being one example), But should JS be avoided where possible?
Performance
From what I can see the entire page is rendered regardless of the change made to it (the render tree is diff'ed and the changes applied to the DOM), this would appear to be an acceptable approach for low frequency page changes, but for finer more frequent changes will this end up causing performance problems? I'm thinking of interactions like drag and drop, opening menus, any mouse move interaction that changes the UI. Will this style of change remain the job of JavaScript?
Async and events
The Blazor environment strongly encourages the use of async methods, which on whole works, until you get into handling events raised within the Model or ViewModel where the handler needs to invoke Async methods. An approach I've been experimenting with is to use Async Events, but I'm unsure of whether this will cause problems down the line. The other approach is to block on the Task.Wait, but this seems unsatisfactory. I guess this is not entirely a Blazor design issue, but it seems to have presented itself quite a lot in my Blazor experience. Thoughts?
Related
All:
I got some decision pain here, as beginner, say I need to build a data visualization Application with D3, I kinda wondering which library should I use to handler those chart drawing( it is a little bit complicated, with a lot of user action like add/remove/moving/style/animation etcs), currently this application is implement by Angular1 and not that modularized, also when data grows, the chart drawing is lagging. That is why I am thinking of switching.
Right now, I do not have much experience about either Angular2 or React, but I hear that they are both very performanced, so in terms of code complexity and performance, could anyone give me some concrete suggestion?
Thanks
We currently have a large javascript application that uses ReactJS and D3 charts.
It's pretty performant although we have the lucky advantage of not having to support mobile as it's an enterprise application.
One thing I would say is be aware of Reacts shouldComponentUpdate method and use ImmutableJS for your containers. We've also implemented flux and a WebSocket API, but if you're new to React I'd just try and get a really simple d3 chart like a sankey working and go from there.
When you actually get to the leaf node that's a d3 chart, you can then convert Immutable data types to native objects but only to pass it to d3.
It works completely fine, I wouldn't however manage any sort of state in d3, be careful not to fall into that trap. You want to attach events like click etc. to a d3 node, but your React components should be handling those events and not d3.
Hope that helps.
I have also used d3 and react. They played together perfectly fine for me, especially since d3 is also on npm and fit nicely into the bundler required to compile jsx used by react. I don't see a downside to it. As a matter of fact, http://avocadojesus.com is built entirely in react and d3js, and uses the web audio api to stream the data into different d3 data visualizations (so dont view in safari unless you want to be bored lol).
I have used angular1 on projects and been very happy with most aspects of it. I think the only place it fell short with me was on large ng-repeat mappings. If your front-end is architected in consideration of your users, it's very unlikely you should run into large ng-repeat problems (But I would probably avoid for any infinite scroll situations, as the ramifications of leaving all those elements in the dom can cause major problems in angular's dom rendering cycles).
I think Angular has been a bit of a disappointment to me only in that it seems to be hanging in the balance for so long. Angular2 is completely rewritten in many ways, so learning angular1 right now might cause more growing pains down the road for you, as you would obviously want to upgrade. Learning Angular2 was frustrating last time i tried to do it, as they hadn't released any documentation and were still advising extreme caution against using it for anything non-experimental. Now they are in beta, and it seems pretty safe to learn. If you are feeling brave, or if you are just experimenting and think fondly of angular1 then angular2 is a good choice for you. The right tool for you should be one that you really love to work with, and both projects have excellent support docs and community so its safe either way IMHO
If it were up to me, I would stick with react. There is a large community built around it, and the framework is very simple. The simplicity of it is what really allows it to shine. It trains you in the proper way to collect, distribute, and update data to affect the state of all your components. If you are brave and skilled, i would recommend doing a deep dive into the flux framework as well, as it is fairly complicated, but allows you to see how well such a simple component architecture can do when informed by a sophisticated set of data stores and actions. Conceptually, it was very enlightening for me, and it informs all the code that i write now. My rails has even been getting fluxy lately haha >.<
I am looking for some advice on how to track application performance; the application is developed using ReactJS, and I am building it with webpack.
First of all I will just present what I have done and what the application is expected to do:
I need to render a lot of, let's just call them widgets, that update real time presenting a lot of data. So, on a scale, I would say each widget renders about 50 to 80 values, these updates might be received from the server side all at once, so they should happen instantly when data is received. Consider I might have around 25 to 30 widgets that need to update real time.
Let me tell you a little bit about the implementation:
I have used the smart/dumb pattern for ReactJS components
The actual data is stored in application state and is distributed by the smart components to dumb components through props
I am using Pure Render Mixin to avoid unnecessary rendering
Also using Immutable data so that I will ensure Pure Render Mixin is working accordingly, that is, being accurate in determining if a render is necessary and at the same time be fast, really fast.
There are no weird bindings of callbacks, that might determine re-rendering of components, this is double checked already.
Now the issues I am having:
with about 5-6 widgets, meaning around 400-500 values that need to render each second, it works very well in Chrome and decent in Firefox.
adding about 25-30 widgets gets the application to still work decent in Chrome, but it starts to act slow in Firefox, by slow I mean user interaction that might even get a delay of around 1 second. That is really unacceptable.
What I have tried:
use Chrome dev tools to measure the performance; that didn't help too much, what I could see though, is that everything is alright. And there is no way I could read all the graphics this tool provides. (And I've read a lot of articles about it)
tried to use Firebug in Firefox. That's an amazing tool, but not in this case; just by opening it with the above mentioned load (30 widgets) gets Firefox to freeze... and the profiler gave me nothing)
on a last resort, I have used the default dev tools from Firefox, it has a performance tab. That got me some information of what parts of the application has the most load on the browser. It seemed it was some heavy computing determining min/max of an Immutable.List.
Unfortunately the application still has performance issues, and it is of high importance to get it working perfect, and Firefox profiler doesn't give me any other leads.
So my questions would be:
what would be the next action to take in order to determine performance issues? (as much as possible where they are: class/method/at least file)
did you guys use any performance testing tool that gives you an insight of what the hell is happening?
is there something else to consider to improve the overall functionality, especially targeting multiple browsers? (Firefox, Chrome, IE11)
if the user press the button, handling this event should put on controller or event? Thanks.
It really depends of the platform you are working on, because there are huge differences with desktop development (like .NET's WinForms / WPF or Java's Swing versus ASP.NET and Java Servlets or PHP, for example).
In desktop programming the event system makes it really easy (and sometimes even natural, depending how you look at it) to do a lot of the work in the event itself, but eventually you'll find yourself coding A LOT of the program's logic there, making your view a mess. In web programming this is harder to do because you can't really to much of the system logic in the browser (you can't open a connection to the database, you don't have access to the session or any other kind of information that wasn't previously make available by the server).
Also, it is much easier to apply MVC in Web development because of the nature of how the requests and responses work. On the other hand, when programming to Desktop everything is right there at your need, you can easily access any control from probably everywhere, and even if you don't, you will think it is OK (even when it's not) to share things using static variables (or a lot of singletons).
To make a long story short, I'd say that you should make all necessary efforts to resume logic programmin in the events as possible. With some practice, you will discover that delegating the logic to a regular object instead of the view itself will make your life easier in the long shot.
In time: the kind of controller that you use could be important too. For example, ASP.NET uses some kind of Page Controller, while many PHP and Java frameworks are more kind to use a FrontController (it's not a rule of course, but can make a difference of how you see things).
I have been using Dojo and Dijit for more than a year to develop a browser-based IDE. Dojo is a great framework. But creating an IDE-like interface using Dojo is cumbersome and wastes a lot of time unless you are a CSS superman. I have a good understanding of HTML5, JavaScript, and CSS. Building the UI I needed required several CSS hacking that I found by trial and error. There was no systematic way to get from the UI design to the implementation and I am afraid to change the UI layout because any simple change can break the UI, mostly by adding irrelevant scroll-bars to Dijit panes where I do not need them. (the complex UI has 4-5 levels of nested panes including mostly border containers and content panes)
Recently I have come across SproutCore and Cappuccino, which have great demoes and their look and feel is more desktop-based. There has been several discussions comparing these two with each other. But none of them talk about how systematic and quick is it to get from UI design to implementation? Ideally, I should be able to implement the UI I want not more than a couple of days (Assuming that I know the framework), and changing them in the future should be easy.
The other difficulty with Dojo is that I have to work directly with DOM, to append and remove dijit widgets. While I do like to keep this flexibility, I wish I could use a higher level of abstraction to define the application UI. I have read about MVC in SproutCore and Cappuccino, but I am wondering if in practice the provided abstraction layer speeds up the UI development? or the provided layer is a fancy architecture that only increases the readability of the code? Will I lose the direct access to DOM if I build my UI using these abstractions?
Cheers,
Navid
Cappuccino is much higher-level. You write in Objective-J, not HTML/CSS/JavaScript. I personally do not recommend it as Objective-J is a niche language and you'd be stuck with something not widely-understood by everybody. You'll find it more difficult to look for answers to problems, and other people will have more difficulty in maintaining your code.
However, due to it being high level, it does shield you from the drudgery of programming in "standards" (i.e. HTML/CSS/JavaScript). Therefore, you should be able to develop UI's faster and easier, but you'll have to instead learn the ins-and-outs of Objective-J. All-in-all, not much to gain here, I suppose.
SproutCore, on the other hand, is HTML/CSS/JavaScript based, so you don't really have to relearn the basics. It follows the MVC model of separating UI and data concerns, so programming UI's should be easier.
My personal recommendation is to stick with Dojo -- 1.6 has come out, which has change-tracking, state-tracking and bining support. 1.7 is around the corner. The MVC module is improving fast. The next version, 2.0, will be quite awesome. It is being actively developed on, and so you won't be left behind.
Dojo can also be used with the Closure Compiler's Advanced Mode to make highly-compact, highly-optimized, fully-obfuscated builds for deployment. Other JavaScript-based frameworks are not as adaptable.
Cappuccino most definitely goes beyond just improving readability. If you don't want something to have a scrollbar in Cappuccino, don't give it one. That's pretty much the end of the story and one of the great advantages of using such a framework. In my experience, HTML and CSS is just an endless troubleshooting session. With Cappuccino things go where you say they should and stay there. And this is true across browsers as well (most of the time).
Furthermore you can, if you choose to, build your user interface using Interface Builder and Cappuccino's nib2cib utility. This makes it trivial both to initially lay out and to then later shuffle buttons and controls around.
Have you considered jQuery and the jQuery UI?
When designing and building the UI for an application that uses AJAX, when do you consider graceful degradation (for users who have JavaScript disabled, or are using a screen reader)?
At the end, once the AJAX version of the site is completely finished
At every stage of development
I don't
Something else...
These days, progressive enhancement is generally preferred over graceful degradation - i.e. the exact opposite approach.
The method I'm employing so far is to write it so it works without JavaScript and then add the JavaScript on top.
It's really the reverse of graceful degradation. It's an emphasis on enhancing the page as your browser and settings allow.
Relevant article
Graceful degradation can describe two things:
It is a behaviour (normally a website or web application) that allows the site to continue functioning when certain features are disabled (e.g., JavaScript; CSS).
It is an approach that builds the application to work with bells and whistles turned on, and then afterwards fixes are bolted on to make it work without said noisemakers.
I assume you are asking whether or not to use the latter to achieve the former. I'd definitely suggest achieving 1), as anyone who browses with JavaScript off (i.e., lots of people with a computing clue; those using text-based browsers; those using disability aids) will otherwise not be able to use your site.
As for how to do it, A List Apart have a great article on progressive enhancement which is worth looking at, where you build the site to work basically first, and then you add the AJAX, etc. afterwards. I prefer this approach because it gives the app a solid foundation to work on, with decent security and functionality from the word go. Future enhancements to it can be made at the basic level and then added into the AJAX layer; without the former, it's harder to add in gracefully degrading components to the application in the future.
Anyway, enjoy the article and if you want to know more about this stuff generally, A List Apart is a great site!
Jeremy Keith sums up the argument for progressive enhancement with his Hijax article.
Typically, I use the following code to dynamically apply a class of "js" to the HTML element to target JavaScript-enabled browsers
<script type="text/javascript">if(h=document.documentElement)h.className+=" js"</script>