Ferro – Simplifying web development, no more HTML
For a moment I forgot this is homeland of JS-at-any-cost  :) so to let this go through a bit more I&#x27;ll just post excerpts from the linked website:<p>---<p>Introduction<p>Simplifying web-development with Ferro<p>- An example<p>Imagine a webpage that displays a form with a checkbox and an input field. The input should only be enabled when the checkbox is checked. This kind of logic is best handled by the webbrowser, not the webserver. So we would write or generate an HTML page with the two inputs and some javascript. The javascript runs when the page is loaded, it runs a (jQuery) selector to find the checkbox and adds an eventlistener to the click event. When the checkbox is clicked the javascript event-handler function is executed. This runs a selector to find the input field and modifies its disabled attribute. Ironically we need some code to look for the elements that we know are there. We just created them in html!<p>If we look at this example from a functional perspective we only need two things: (1) a form with a checkbox and an input and (2) an action that should run when the checkbox value changes. Wouldn&#x27;t it be nice if we could translate these functional requirements into some Ruby classes and be done. Well, and this should come as no surprise, we can!<p>- Opal-Ferro gem<p>Let me introduce the Opal-Ferro gem. Opal is that wonderful piece of kit that allows us to run Ruby in the webbrowser. Ferro is a small Ruby library that manages the webbrowsers DOM, erradicates the need for searching for elements and introduces some handy naming conventions to simplify CSS design.<p>But most importantly, using Ferro the webdeveloper only needs to think about the structure of the code, not about all the things that are needed to make the code work in a webbrowser.<p>- What are the advantages?<p>Only Ruby and CSS needed<p>Easy naming conventions: CSS classnames match Ruby classnames<p>Easy naming conventions: every DOM element has same ID as the corresponding Ruby object. Useful when attaching javascript libraries to elements<p>Never lookup an element in the DOM. Ferro keeps a handle to each and every element which you can access from Ruby, object oriented style<p>It is fast, browser javascript engines are highly optimized. The developer can control when to render components, only render what is needed when the application loads<p>More secure: it is easy to embed scripts into html. As long as you stay away from using the innerHtml method, XSS attacks should be impossible<p>Easy integration into serverside frameworks like Rails
Ruby == Programmer happyness, Javascript === confusion<p>- What are some disadvantages<p>Every solution to a problem has its pro&#x27;s and con&#x27;s. Ferro is no exception. Here are some of Ferro&#x27;s disadvantages<p>SEO results may suffer if the webcrawler only looks at html. Not really an issue when creating a webapp
Separate content for screenreaders and javascript disabled browsers is needed<p>Coding errors may disable (parts of) the webapp. A good set of (integration)tests is useful<p>Somewhat higher browser memory usage to store the MOM
No support for older browsers<p>- Is Ferro finished?<p>No, Ferro is not yet feature complete. Most of the basic DOM components are done. Navigation and routing are handled. AJAX calls are wrapped.<p>Areas that need work are:<p>Adding a service worker to catch all networktraffic when the browser is offline<p>Adding support for storing and retrieving data (Object Relational Manager)<p>A nice ActionCable &#x2F; websockets client<p>A markdown parser (that does not produce html but directly adds elements to the DOM)<p>Localization (I18n)<p>Many more ready made components, for instance a table component with sorting, filtering, etcetera. Preferably in separate gems<p>Capture touch events and gestures<p>Proper documentation and testset<p>A utility to convert html to ferro code might be useful<p>- What we don&#x27;t need when using Ferro<p>HTML<p>Javascript DOM finders (like jQuery, Zepto, ...)<p>Javascript libraries&#x2F;frameworks that extend html (like Ember, Angular, JSX, Vue, Stimulus)<p>Shadow DOM Javascript frameworks (like React)<p>---