×

CSS Architecture for Component Based Applications

MMS Founder
MMS Guy Nesher

Article originally posted on InfoQ. Visit InfoQ

CSS Architecture is a complex subject that is often overlooked by developers as it’s possible to encapsulate CSS per component and avoid many of the common pitfalls that relate to CSS. While this ‘workaround’ can make the lives of developers simpler, it does so at the price of reusability and extendibility.

When a developer defines a CSS class, it automatically affects the global scope modifying all related elements (and their children). This works great for simple applications where developers can predict the results, but can quickly become a problem when the size of the application and the team grows and unintended results start to happen.

Initially, this problem was solved by BEM – a set of naming conventions that helped avoid clashes and gave developers strong indications as to what each class did (aka form__submit–disabled tells us we are within a form, handling a submit button and giving it the disabled state).

But following a naming convention is often hard to enforce, and when JavaScript offered solutions that were simpler to implement, developers accepted them with open arms. Solutions like CSS Modules or Styled Components take different approaches but solve many of the same problems BEM tackled by containing the CSS within a single component.

To address the lack of cross-application architecture in componentized design, we need to address three separate concerns:

  1. UI – which includes themes and general application behavior
  2. Layout Components – Often referred to as container or smart components that are generally not reusable, but determined how our components behaved in a specific scenario
  3. Presentational Components – these are the reusable pieces of code that power our applications. To increase their versatility, they include as little design (or logic) as possible

UI

The UI is defined in global CSS files that affect the entire application. It includes two main concerns:

1. Constants – Until recently, developers used SCSS or LESS variables, but these days we can use custom CSS properties that are supported by all major browsers.

CSS custom properties provide two important benefits. They can be modified at runtime – which is a perfect solution for switching themes or enabling dark mode, and they can be modified within our layout components allowing developers to adjust the design on a smaller scale more easily.

2. Definition of UI state that can generally be broken down into three aspects:

  1. Modifier states – includes decisions such as size (large/small) or design (primary/secondary) variations of different elements.
  2. Behavioral states – includes app-wide states like online/offline, loading, etc.
  3. Pseudo states – temporary states like enabled/disabled that also include CSS states like :hover, or :focus.

Layout Components 

Layout components help put our reusable components to work by organizing them in a specific way on the page. As such, their responsibility is divided between initializing the reusable components with the particular props and design as well as setting the particular layout of the area they control using capabilities such as CSS Grid, Flexbox, etc.

Reusable Components

Reusable components have very little logic; they accept data from the layout components and trigger events (or callbacks) back to the layout component when an action is taken.

To ensure these components are reusable, we try to include only the bare minimum of logic and design – which means that we generally avoid properties such as display, width, or margin.

This can be a difficult task as it often requires handling more scenarios that the component was initially built for (a button that supports multiple lines, or a title with too much text), but ensures that the component is truly reusable and won’t require re-writing the next time we use it in our application.

Subscribe for MMS Newsletter

By signing up, you will receive updates about our latest information.

  • This field is for validation purposes and should be left unchanged.


Bolero Enables Writing F# Apps Running in WebAssembly Using Blazor

MMS Founder
MMS Sergio De Simone

Article originally posted on InfoQ. Visit InfoQ

Bolero makes it possible to build WebAssembly apps in F#. Bolero leverages Blazor, Microsoft technology to enable running C# in the browser.

Bolero apps are based on the model-view-update pattern, which derives from Elm and React. The general idea is you describe your UI using a specific type whose values represent the different allowed UI states. User actions produce transitions from the current value to the next which is then used to update the UI. For example, this is how you would define a counter app:

type Model = { value: int }
let initModel = { value = 0 }

type Message = Increment | Decrement
let update message model =
    match message with
    | Increment -> { model with value = model.value + 1 }
    | Decrement -> { model with value = model.value - 1 }

let view model dispatch =
    div [] [
        button [on.click (fun _ -> dispatch Decrement)] [text "-"]
        text (string model.value)
        button [on.click (fun _ -> dispatch Increment)] [text "+"]
    ]

As you can see, in this case our model contains just an integer value. The user can generate two kinds of messages, to increment or decrement the counter, by clicking on the corresponding button. The message is handled to update the model and generate the new UI state.

In addition to Model-View-Update, Bolero adopts HTML-in-F#, which is a collection of F# functions that will output HTML elements. For example, you could write:

let myElement name =
    div [] [
        h1 [] [text "My app"]
        p [] [textf "Hello %s and welcome to my app!" name]
    ]

Alternatively, you could use HTML templates, which define your app’s HTML with “holes” that you fill with content generated using F#. For example:

type Hello = Template<"""<div id="hello">Hello, world!</div>""">

let hello =
    Hello()
        .Id("hello")
        .Who("world")
        .Elt()


As Microsoft F# engineer Philip Carter explains, Bolero only uses some components of Blazor’s under the covers, but it is mostly an independent effort. What is interesting in Bolero’s approach is the browser is actually executing F# code using the F# Compiler Services, which is a component derived from the official F# compiler and included the F# repl. As an example of the kind of advanced developer experience this model enables, Carted demoed how you can write F# code in a browser window powered by Bolero. Although it takes some time to launch the F# compiler, once it is ready it will flag almost instantaneously any syntax error you have in your code. Interestingly, the whole implementation is done in plain F#, running on Bolero with Blazor.

To create a Bolero application you should install .NET Core SDK 3.0 or newer. Then, you install Bolero and create a new application:

dotnet new -i Bolero.Templates
dotnet new -i Bolero.Templates


Bolero official documentation can be found on Bolero website.

Subscribe for MMS Newsletter

By signing up, you will receive updates about our latest information.

  • This field is for validation purposes and should be left unchanged.


Uber Open-Sources Plug-and-Play Language Model for Controlling AI-Generated Text

MMS Founder
MMS Anthony Alford

Article originally posted on InfoQ. Visit InfoQ

Uber AI open-sourced their plug-and-play language model (PPLM) which can control the topic and sentiment of AI-generated text. The model’s output is evaluated by human judges as achieving 36% better topic accuracy compared to the baseline GPT-2 model.

The team provided a full description of the system and experiments in a paper published on arXiv. PPLM starts with a pre-trained  language model (LM), such as GPT-2. These LMs can produce complex output which approaches human fluency, but it is difficult to control the specific properties of the generated text. Instead of “fine-tuning” the LM with additional training data, PPLM uses a separate attribute model that can evaluate the LM’s output for sentiment or topic; this model is used to control the text produced by the LM. A strength parameter can tune how much the attribute model adjusts the LM output. According to Uber’s researchers,

PPLM allows a user to flexibly plug in one or more simple attribute models representing the desired control objective into a large, unconditional LM. The method has the key property that it uses the LM as is—no training or fine-tuning is required—which enables researchers to leverage best-in-class LMs even if they do not have the extensive hardware required to train them.

Recent state-of-the-art NLP research has focused on creating pre-trained models based on the transformer architecture. These models are large, containing hundreds of millions of parameters, and are trained on large datasets containing millions of words; the training may take several days of runtime on expensive GPU hardware. Researchers without the resources to train their own state-of-the-art models must often choose to use a publicly available model that isn’t quite suited for their task, or go with a smaller, less accurate model of their own. Another alternative is to fine-tune a pretrained model, but that presents the risk of catastrophic forgetting.

The key to PPLM is to use an additional, simpler model, the attribute model (AM), that can score the output of the LM; in particular, it calculates the probability that the LM’s output text has some attribute (for example, that the text has positive sentiment, or is about politics). The AM can also calculate the gradient of that probability, which is used to “steer” the LM; the transformer-based LMs are “autoregressive,” meaning that as they generate a sequence of words, the previously generated word becomes an input to the system for creating the next word. In PPLM, the gradient of the AM is also used to generate the next word, such that it is more likely to contain the desired attribute.

Uber highlighted the “pluggable” nature of PPLM with other techniques that require training and fine-tuning the full model. For example, a team from Google Brain presented a paper at last year’s NeurIPS conference that uses a generative-adversarial technique made popular by deep-learning “style-transfer” image processing systems. OpenAI created a system that uses reinforcement learning (RL) to incorporate human feedback in fine-tuning a GPT-2 LM. On Hacker News, user Gwern Branwen wrote:

What’s particularly nice [about PPLM] is if you can plug in a classifier for things like esthetics based on human ratings, along the lines of [OpenAI’s system] but better – why spend the enormous effort running [RL] to brute force the classifier to obtain desired text or image output, when you can just backprop through it and let the classifier itself tell you how exactly to improve the inputs?

PPLM source code is available on GitHub. A demo is also available on NLP research site HuggingFace and via a Google Colab notebook.
 

Subscribe for MMS Newsletter

By signing up, you will receive updates about our latest information.

  • This field is for validation purposes and should be left unchanged.


Article: Book Review: Enterprise API Management

MMS Founder
MMS Kent Weare Luis Augusto Weir

Article originally posted on InfoQ. Visit InfoQ

In the Enterprise API Management book, Luis Weir provides technology-agnostic strategies that organizations can implement to drive more predictable outcomes. The topics that Weir covers in this book include the Business Value of APIs, Business-Led API Strategy, API-Led Architectures, API-Architecture Styles, API Life Cycle and more.

By Kent Weare, Luis Augusto Weir

Subscribe for MMS Newsletter

By signing up, you will receive updates about our latest information.

  • This field is for validation purposes and should be left unchanged.


Apple Open Sources ServiceTalk to the Java Community

MMS Founder
MMS Michael Redlich

Article originally posted on InfoQ. Visit InfoQ

Apple have open-sourced ServiceTalk, a JVM network application framework that provides a common and extensible networking abstraction built on top of Netty. ServiceTalk was conceived to improve low-level abstractions provided by Netty such as threading and usability. ServiceTalk provides higher-level, more targeted APIs for commonly used protocols such as HTTP/1.x, HTTP/2.0, and gRPC with a consistent networking stack and feature set that include client-side load balancing and service discovery integration.

ServiceTalk was designed to support different programming paradigms based upon Reactive Streams, including various blocking patterns, and has particularly strong utilities to cross the synchronous and asynchronous API boundary. This allows developers to defer the complexity of asynchronous control flow where it is not currently required within the application. Native implementations of Reactive Streams operators focus on limiting memory consumption, cross cutting features, such as AsyncContext and blocking safe-by-default, and exploiting concurrency rules in Reactive Streams specification to optimize for server-side use cases.

The goal of open-sourcing ServiceTalk was to provide building blocks that would enable contributions from the Java community. With Apple’s pre-established relationships in the Java community, they hope to foster a similar community with ServiceTalk. Apple told InfoQ that in the short time ServiceTalk has been open-sourced, there has been growing interest from initiatives such as Project Reactor, Micronaut, RxJava, gRPC, and Vert.x.

Apple also told InfoQ that a number of opportunities exist for the Java community to contribute to ServiceTalk in the areas of: integrations with Spring Boot, Micronaut and Project Reactor; enhancements to existing and new protocols; integrations with service discovery via the pluggable ServiceDiscoverer API; implement the new reactive streams operator; and on-going work in the client-side load balancing domain.

Developers can get started with ServiceTalk by studying the HTTP and gRPC examples for asynchronous and blocking environments.

Subscribe for MMS Newsletter

By signing up, you will receive updates about our latest information.

  • This field is for validation purposes and should be left unchanged.


JakartaOne 2019: Livestream 7pm to 1am Summary

MMS Founder
MMS Uday Tatiraju

Article originally posted on InfoQ. Visit InfoQ

The inaugural JakartaOne Livestream global virtual conference was held on September 10th, 2019 with 19 one-hour sessions. The conference provided insights into the current state and the future of Jakarta EE and MicroProfile related technologies, and primarily focused on cloud native Java application development. The sessions included keynotes, demos, panel discussions, and upcoming specifications delivered by an all-star cast of Java luminaries.

Most of the final sessions of the conference were dedicated to presenting roadmaps and upcoming specifications related to Jakarta Security, Jakarta Servlets, Jakarta Web Services, Jakarta Messaging, and Jakarta Server Faces.

Arjan Tijms, project lead for Jakarta Security, presented What’s Coming to Jakarta Security? Arjan started his presentation with basic security concepts like authentication and authorization, and a brief history behind the Jakarta Security project. He mentioned that the project’s overarching motto is to “Enable security in applications without requiring any kind of vendor specific configuration.”

Built on top of Contexts and Dependency Injection (CDI), Jakarta Authentication (JASPIC), and Expression language, Jakarta Security’s recent 1.0 release includes an HTTP Authentication API with built-in BASIC and FORM based authentication mechanisms, and an Identity Store API with built-in DB and LDAP support. Arjan wrapped up his presentation by highlighting features like custom authorization rules, CDI compatible roles, additional built-in authentication mechanisms (like JWT and OAuth2), JASPIC and Jakarta Authorization (JACC) as standard SPI for Jakarta Security, and new APIs that will potentially be delivered in the next release of Jakarta Security.

Arjan, who is also the project lead for Jakarta Server Faces (JSF), discussed the relevance of JSF, various JSF runtimes, the versioning aspects, and the upcoming roadmap in a second presentation, titled What’s Coming to Jakarta Faces? He started his presentation by talking about the rise in popularity of client side JavaScript frameworks like Angular and React, which put a dent in the usage of JSF. However, JSF is still relevant in the enterprise space with a vibrant community. Arjan stated that a key advantage of JSF is its native support for server side rendering (SSR).

A new JSF runtime called Piranha was introduced during the presentation. Piranha is a composable, programmatic, unit testable cloud native runtime for JSF. Arjan also touched upon some of the upcoming features like new life cycle events, simplified API, and native views in Java with code examples during the presentation.

Markus Karg, key committer of Jakarta RESTful Web Services project (formerly known as JAX-RS), shared some insights on the status and roadmap of the project in his presentation titled Jakarta RESTful Web Services: Status Quo and Roadmap. Markus started his presentation by highlighting the differences between the old school way of deploying JAX-RS based applications using heavyweight Java EE application servers like GlassFish versus cloud native Kubernetes and container based lightweight application deployments. He stressed the need for evolving and modernising Jakarta RESTful Web Services as the go-to standard for developing RESTful applications that can be deployed on resource constrained environments.

Marcus discussed the feature list and roadmap for the upcoming quarterly releases of Jakarta RESTful Web Services, starting with version 2.2 all the way to version 3.1. The 2.2 feature list includes an HTTP server with instant start and stop, low resource consumption, and support for MicroProfile API. Markus concluded his presentation with a live coding and debugging demo showcasing features of the upcoming 2.2 release that provides a Java SE bootstrapping API.

Ed Burns, co-spec lead of Servlet and JSF, gave a presentation on the Jakarta Servlet project titled Jakarta Servlet: A new Twist on an Old Favourite. Ed started his presentation by reporting on the progress of Servlet 4, specifically 4.0.3 version, made by the Jakarta team. Ed stated that the project’s current plan is to focus solely on bug fixes. He then touched upon microservices, and how servlets can sort of provide a means to start building microservices in green field projects. The various performance benefits and features offered by HTTP/2 like binary framing, multiplexing and server push, all of which are supported by Jakarta Servlet, were also discussed. Ed concluded his presentation by stating that Jakarta Servlet offers significant incremental improvements like asynchronous support, reactive non-blocking I/O support, and resource injection.

David Blevins, founding member of Eclipse MicroProfile and Jakarta EE, presented Jakarta Messaging 3.0, Redefining JMS to give an overview of where Java Message Service (JMS) 2.0 left off, and the potential direction and evolution of Jakarta Messaging project. David started his presentation with a 2 minute perspective of JMS 2.0. JMS 2.0 was mainly a programmatic improvement over its predecessor JMS 1.1 that dealt with reduction of boilerplate and ceremonious code required to build JMS based applications.

David then briefly talked about the JMS timeline before taking a deep dive into the various ideas being proposed for JMS 3.0. Some of the ideas include greater CDI support, annotation based configuration, strong typing, JSON support, and messaging client support. David used extensive code examples to describe these ideas.

A Q&A session with Reza Rahman, principal program manager, Java on Azure at Microsoft, was organized to give the audience a chance to ask and clarify some aspects related to Jakarta EE.

Several InfoQ Java editors will be collectively reporting on the entire 19-hour conference by each covering a portion of it.

Subscribe for MMS Newsletter

By signing up, you will receive updates about our latest information.

  • This field is for validation purposes and should be left unchanged.


Microsoft Introduces Power Virtual Agents, a No-Code Solution to Building AI Bots

MMS Founder
MMS Kent Weare

Article originally posted on InfoQ. Visit InfoQ

In a recent blog post, Microsoft announced the general availability (GA) of Power Virtual Agents, a service designed to democratize building conversational chatbots using a no-code graphical user interface. The service is part of the Microsoft Power Platform, which includes Power Apps, Power BI and Power Automate and democratizes access to building artificial intelligence-powered bots.

By Kent Weare

Subscribe for MMS Newsletter

By signing up, you will receive updates about our latest information.

  • This field is for validation purposes and should be left unchanged.


Article: Candy Crush QA AI Saga

MMS Founder
MMS Alexander Andelkovic

Article originally posted on InfoQ. Visit InfoQ

To be able to improve features in games which are constantly evolving, the challenge will be to scale tests to be on a par with new feature development. Automated tests are vital for King to keep up testing Candy Crush, therefore they are constantly looking for new improved ways to test.

By Alexander Andelkovic

Subscribe for MMS Newsletter

By signing up, you will receive updates about our latest information.

  • This field is for validation purposes and should be left unchanged.


Presentation: Focusing on Culture to Fast-track Agility

MMS Founder
MMS Anna El Ali Jody Weir

Article originally posted on InfoQ. Visit InfoQ

Anna El Ali, Jody Weir share the 3C framework used for successfully creating culture movements to help Agile ways of working flourish.

By Anna El Ali, Jody Weir

Subscribe for MMS Newsletter

By signing up, you will receive updates about our latest information.

  • This field is for validation purposes and should be left unchanged.


A-Frame 1.0 Release Adds WebXR and AR Mode

MMS Founder
MMS Dylan Schiemann

Article originally posted on InfoQ. Visit InfoQ

A-Frame, a web framework for building Virtual and Augmented Reality experiences on the web, recently reached the A-Frame 1.0 release with support for the WebXR specification and an AR mode for browsers which support ARCore and ARKit.

By Dylan Schiemann

Subscribe for MMS Newsletter

By signing up, you will receive updates about our latest information.

  • This field is for validation purposes and should be left unchanged.