Issue
I am learning Dart and suddenly had an epiphany (or possibly, an epiphany):
Can I write a Dart web app where the “view” is done 100% in Dart?
I’m talking: absolutely no (none/zero/nadda) HTML files (.html). 100% Dart code. Something like:
class SigninView {
LabelElement signinLabel;
InputElement emailTextField;
InputElement passwordTextField;
ButtonElement signinButton;
// constructors, getters, setters, etc.
// Perhaps called from inside constructor...
void initUI() {
signinLabel = new LabelElement();
signinLabel.innerHTML = "<span class=\"blah\">Please sign in</span>";
emailTextField = new InputElement();
emailTextField.innerHTML = "<input type=\"text\" name=\"fizz\" placeholder=\"Email\"/>";
// ...etc.
// htmlFactory would be something I'd need to write myself (?)
String html = htmlFactory.newHTML(signinLabel, emailTextField, ...);
querySelector("#someDivTag").innerHTML = html;
}
}
In theory (that is, my intentions with the above code), as soon as the SigninView
is created, it initializes a bunch of DOM elements and populates someDivTag
with them.
- Is this possible? If so am I “doing it right”, or is there a different/preferred/standardized approach to this?
- Does this introduce any additional/potential caveats (memory leaks), performance or security issues that I should be aware of?
- If I were to adopt this strategy throughout my whole app, can I assume the app would be quicker to download (less HTML text), but slower to execute (dynamic DOM element creation)? If so, is there a way to somehow instantiate all the DOM elements my app will need up front (slowing down initial download time), and then only make certain elements visible as I wish to render different views/screens (thus speeding up execution time)?
Solution
You need an HTML file with the script tags for the Dart startup.
Anything else can be done in Dart.
Answered By – Günter Zöchbauer
Answer Checked By – David Goodson (FlutterFixes Volunteer)