Is it advisable to use angular with atomic design?
"A lot has been said about creating design systems, and much of it focuses on establishing foundations for color, typography, grids, texture and the like. This type of thinking is certainly important, but I’m slightly less interested in these aspects of design because ultimately they are and will always be subjective. Lately I’ve been more interested in what our interfaces are comprised of and how we can construct design systems in a more methodical way", Brad Frost.
Due it's component based architecture, it is very easy to achieve Atomic Design in Angular. In fact, some of the Angular best-practices that encourage reuse, maintainability and componentization fit naturally into the Atomic Design paradigm.
Here is how parallels can be drawn between Atomic Design and Angular.
The quoted definitions are taken from the "official source": http://atomicdesign.bradfrost.com/chapter-2/
Atoms
[A]toms include basic HTML elements like form labels, inputs,
buttons, and others that can’t be broken down any further
without ceasing to be functional.
In Angular, you will make use the basic HTML elements, like the ones listed in the quote above, in your component templates.
Molecules
[M]olecules are relatively simple groups of UI elements functioning
together as a unit
Angular best-practices encourage creation of small components that can be reused across the application (or even shared with different applications). If you look at the Angular Material component library, there many examples of premade components, which can be considered "molecules" in Atomic Design.
Organisms
Organisms are relatively complex UI components composed of groups of
molecules and/or atoms and/or other organisms.
In your Angular application you will often have reusable containers or components. Page headers and footers, navigation menus, product preview boxes, etc. are some examples. Those container are made up of smaller components ("molecules"), and are re-used across the application (or even several applications).
Templates
Templates are page-level objects that place components into a layout
and articulate the design’s underlying content structure.
The definition above, with some minor edits, could as-well be something describing Angular's template system. To create the pages, you place your components ("organisms", "molecules", "atoms") to create the structure of a page.
Pages
Pages are specific instances of templates that show what a UI looks
like with real representative content in place.
This is essentially the rendered output of Angular component templates in the browser - the final product of an Angular project so to say.
As you can see, the Atomic Design can be applied to an Angular project. Moreover, there is a lot of overlap between Angular's component architecture and Atomic Design.
Related
In team Vue.js project I'm curently working, I wrote something like this in view:
component01
component02
...
There is more than 10 componenets. In every component is one section of landing page, nothing fancy, mostly HTML/CSS and some animations, components don't have props and are used only once. Idea is to simplify maintenance of code - instead of editing view page with, for example, 1000 lines of code, we can edit component with 100 lines of code.
And got instructions to merge all components into one view (eg. 1000 or more lines of code). I'm OK with that, but got me thinking and searching for opinions.
Is there best practice for situations like this - use components even if there is no repeating and no props, to simplify code, or hold everything in one view (and long) file. Components can be in separate folders, so big number of components should not be a problem. Or will they?
Components are the building blocks of all modern JavaScript frameworks as they provide a better overall architecture for your application in terms of reusability, testability, maintainability and in the end SOLID and KISS principles.
I would recommend splitting your app in smaller and presentational components and use services for business logic. It does not matter if the application is small, by following these principles it will be able to grow with no or less pain. That is the way Angular encourages you to build applications.
As always in this industry, don't overuse these concepts and apply where appropriate and with common sense ;-)
I'm a semi-senior react and JavaScript developer, I've made several Universal react application.
Today our CTO told me: Do you use a software architectural pattern for your application?
I've no answer, He points to the Android team which use MVVM for their applications.
I'm searching greedy but not found a trend methodology or example for this situation. I've used Redux, Redux-Saga, React-Context and etc.
I don't know how to explain to our CTO or what is his answer?
Hence: Does a react app really need a software architectural pattern?
React itself is not particularly opinionated about software architecture. It is a library that facilitates the reusable component paradigm alongside guidelines for managing things like state and data sharing (props). At some point, Facebook described this as the V in MVC but have since moved away from that marketing to call it more abstractly A JavaScript library for building user interfaces.
Of course, the typical tooling associated with React apps does lend itself to something of an architecture when used together.
A couple of potential ways to think about it:
Simple React apps might be just "VVM" or "VC"
MVC is probably the better-known of the two in the development world. The key conceptual difference between a controller (C) and view-model (VM) could be boiled down into: a controller can have many diverse responsibilities, like listening for events and routing them in the right direction. It's the glue that facilitates the functionality of an entire application. A view-model, on the other hand, is simply responsible for gluing the current state of the data to the model.
So Facebook's original use of "V in MVC" could probably just as easily have been "V in MVVM" - the term controller makes more sense in backend development world.
A barebones React app, without Redux, that pulls data directly into components (e.g. fetch's in componentDidMount or leveraging GraphQL) with limited data wrangling of any kind could be called a simple "VVM" model.
View-Model (VM): Component-related code that manages simple state, passes data directly onto View, potentially passes data directly back from View
View (V): How the visuals look (JSX, CSS)
Add some complexity, and you could call it "MVVM"/"MVC"
If you toss in Redux, redux-saga, or even start doing crazy things with simple React component state, you're introducing model operations. There're at least two things this Model (M) can represent:
Actual business logic for your application
Storing and managing complex behavior in your client
Business logic is sometimes undesirable in practice: for example, if you have control over the server, it might be worth keeping all your business logic in one place (on the server) and just feed the UI what it needs to interact with the user. But if you have limited REST endpoints and need to do some wrangling (e.g. in your sagas, or within components), that'll be business logic.
Client behavior management is likely, especially in complex applications where you might be doing things like displaying different things to the user based on their session (e.g. they're an unregistered user vs. user vs. admin). You're probably doing this in any redux store interactions that are contained to use by only the client.
Disclaimer: discussing MVC, MVVM, etc. is likely to lead to many different opinions of exactly what they mean [1]. Above, I tried to draw parallels between common patterns I've seen and how they fit into MVC/MVVM, but there's so many different ways to approach it or more granular ways to think about it. I wouldn't get too hung up on putting a label on it as long as your system is easy to understand: modular, DRY, abstracted, etc. at levels that make sense for your use case and scale of development.
[1] Discussed in the some more length in answers and comments to this question
Vue 3 is MVVM:
Proxy Update
Model → ViewModel → View
Model ← ViewModel ← View
Update Event
And React:
setState Update
Model → ViewModel → View
Model ← ViewModel ← View
Update Event
The difference is only how the frameworks notify Model changes to the ViewModel.
A simple Web App does not require MVC, MVVM, does not require even React IMO.
Possible evolution of a simple ReactJS App that may see the need of MVVM/MVC/ if it tries to be PWA (Progressive Web App). In other words - if it tries to do some (application/domain) specific logic - offline and some other - online. This is natural point of thinking for mobile app development. Then, the information may be retrieved from the Local Storage or the IndexedDB (for the Web) or the Back-End/Rest/. Then, the separation of Model, Storage/Repository/Source Of INfo/ ViewModel/ or Controller/ and View will be natural and actually needed for all stuff to work correctly...
I have a performance issues with Angular (as many others). I wish to change only the view layer to either reactjs or Mithril. I found examples of React js (for example http://www.bimeanalytics.com/engineering-blog/you-put-your-react-into-my-angular/), but not of Mithril.
Can anyone advice to the pros and cons of using Mithril as an angular view vs Reactjs?
Thank you!
I don't think there's an objective answer here, and as a Mithril user I have my biases, but here is what I think.
In terms of philosophy, Mithril and React are quite similar: you write view functions that describe how your app should look at any given time. In terms of rendering performance, I don't think there's a clear winner. There are links / blog posts that say Mithril is faster than React, and vice versa.
So instead what I think you should focus on is:
1) Which API do you prefer? With React you should use JSX lest you have to reverse engineer their documentation. Mithril also just has one lifecycle hook (the view function), whereas React has several (such as shouldComponentUpdate) -- do you need all those hooks?
2) Community support -- React is the clear winner here, and the fact that there are existing examples of integration with Angular is a win.
3) Compatibility - DOM redrawing / diffing in React is done when data changes, just like Angular, but Mithril's redraw is centered around user interaction (such as clicks, route changes, ajax requests). You can manually redraw, but that's less desirable. I don't know how well Mithril will fit into an Angular setup.
Should you decide to use Mithril, I'd encourage you to use the Google group (https://groups.google.com/forum/#!forum/mithriljs) as a resource, or at least report back on your experience.
Mithril and React have many similarities. I've used both of them and here are some pros and cons.
Mithril
Pros: It's loading times are very fast. This is because it's templates are compiled first and then served to the browser. You can write Mithril views in JavaScript. Small size, good documentation and doesn't force you into a predefined structure.
Cons: Small API can make it unsuitable for larger more complex projects.
ReactJS
Pros: React's one-way data binding means that it's easy to see where and how your UI is updated and where you need to make changes. It also provides server-side rendering, virtual dom support, good debugging tools, easy to write tests, easy to reuse components, flux architecture patterns, and extensive SVG supports etc.
Cons: Heavy on memory compared to Mithril, not a complete solution as it mainly focuses on the view, and need to learn a new syntax etc.
In my view, React is overall preferable. But, if your application doesn't need all these extra stuff that React provides, you should go with Mithril.
I know that this has been asked previously, most notably here.
However, the answers seem to me quite abstract and I find my self quite confused in practice.
The .vs answer seem to be:
Polymer (and more correctly, Shadow DOM) create the ability to not
only compose bits of HTML, but to encapsulate them as well. This is a
fundamentally new capability and one that can be used with any other
templating system or framework to enhance their power.
Which doesn't really tell me all that much, as far as I understand angular directives do pretty much the same thing in practice, although polymer elements might be a bit more efficient performance wise. I'm sure that "encapsulate" has some kind of deeper meaning here in this context that I am not comprehending.
Let's say I'm developing an AngularJS web application. When, how and why would I use polymer elements over angular directives?
Would polymer elements be used instead of angular directives, if so when would one use one over the other? Or would angular directives be implemented in terms of polymer elements?
You're really asking two different things, "What's the differences when implementing/building components vs. using one?"
Consuming components
In the foreseeable future, you use both together. It doesn't matter what technology/library a web component is built with or what vendor makes it. Simply bower install (or similar) and use the components that make sense for your app.
What matters is that everything will be DOM, meaning elements will work seamlessly together. The interop story is great. Here's a POC of an Angular directive data-bound to a Polymer element: http://ebidel.github.io/polymer-experiments/polymer-and-angular/together/
Building components
Building elements is a different story at the moment. Polymer's approach is to center itself around all things web components. Angular was built before the time of web components, so things are a bit different.
Angular directives are a way to build custom tags/components. Polymer and the Custom elements specification is the standards-based way to do that.
How you build a Polymer-element is extremely declarative. Angular directives are mostly defined in JS (with the ability to reference a template file).
Because Polymer elements using Custom elements, inheritance is simple. I'm not sure of the inheritance story in Angular directives/
Polymer elements use Shadow DOM. This gives them encapsulation of DOM and CSS. Styles you define in your element don't bleed out and page styles don't bleed in. I could be wrong, but Angular directives do not have any notion of style encapsulation. It's a hard problem that the Shadow DOM spec gives us for free.
The data binding concepts are similar
would angular directives be implemented in terms of polymer elements
Eventually, Angular will adopt some of the evolving Web Component standards. This will be true for all frameworks. Ember just made their 2014 plans known, which include web components. For example, Angular.dart already uses Shadow DOM for directives.
Polymer elements (custom elements) are interoperable with other custom elements by default. This is because they're just DOM. DOM elements work well together :)
Hope this helps!
I know Model-View-Controller well, have known about it for years and used it in terms of server-side development with languages like PHP.
However, I am now working with JavaScript and building a big application with it utilizing SVG, Canvas among other great features modern browsers support. The project is big, so, the architecture behind it must not be fragile.
JavaScript and MVC do not get on like a house on fire, because JavaScript is event-driven by nature. So, are there any architectures or anything else I should definitely learn, understand and implement?
The software will have to deal with data. It already utilizes local storage and web SQL database. I need a Models, right? There is an UI, so I have Views? However, do I have Controllers? What about events? How do I structure everything?
Architecture, architecture, architecture -- that's what I'm interested in. I'm fine with the language of my choice.
First, I'm the author of JavaScriptMVC, so I'm extremely biased in a whole variety of ways. First, there are 6ish things you will ever do in a JS application:
Load Scripts
Respond to user events
Update the DOM
Request data from the server
Convert that data into something useful for JavaScript
Organize your front-end business logic
Your choice of architecture might depend on what tools you want / need.
For general architecture, I do think it's important to separate concerns.
I strongly encourage you to find some way of doing dependency management, and client side templates. They will make your life a lot easier.
JavaScriptMVC uses a tiered MVC approach that's based heavily around custom UI events and OpenAjax events.
I build my low-level widgets with $.Controller in a similar way to how you would build jQuery widgets. The big difference is that the widgets produce a non-ui event that top level controllers can listen to. For example, a tabs widget might produce a "tab.activate" event like:
$('.tab').trigger('tab.activated')
Then, my higher order controller might listen to tab.activated events, and a the model to update the tab content like:
".flickr tab.activated" : function(tabEl, ev){
Flickr.findAll({type : "rainbows"}, function(images){
tabEl.html("//path/to/view", images );
}
}
Flickr.findAll essentially does a query for flickr messages, then calls back with a list of images. Wrapping the service/ajax functionality with models makes them a lot more reusable.
You'll notice that in the callback I update the html of the tab element with the rendered content from a view. This probably isn't the 'best' way of doing it, but I wanted a quick example. Better would be passing the tabs controller the rendered output, for it to do what it will with it. That way if your tab wants to fade in content someday, it will be able to and your master controller won't have to know about the tab's implementation.
The most important thing is to break down your app into the smallest pieces you can. Have them individually testable (and flexible), and combine the little parts into bigger parts as you work your way up to your application.
Take a look at Ext JS. It has a clean architecture that is well-suited towards highly complex javascript applications.
Data handling and server communication is done via stores. Data rendering is done via grids (with in-cell editors), and forms (with a rich set of form controls), which can both talk to the stores. There's also a set of layout classes to abstract away CSS positioning (border layout, box layout, table layout, form layout, ...).
It is however not MVC in the typical sense. The library encourages a programming style that avoids dealing much with HTML and CSS, letting you live (mostly) in pure JavaScript land. You end up thinking in terms of components and data, instead of individual dom elements and style rules. If you don't like that approach, be warned, you won't like this library.
MVC is still the way to go, in my opinion. If you're looking for a good framework to help you achieve that a little less painfully, I would look at JavaScript MVC, it has models, views, controllers, unit testing, jQuery support, etc.
You should learn the Event Based nature of client-side JavaScript and how it blends with MVC based server-side applications.
You should also learn how to properly program inside of the Prototype based inheritance structure of Javascript.
Both of those things will allow you to write you JavaScript so that it meshes with your server-side application framework and is extensible and re-usable.
One thing i have learned over the years of javascript programming is writing UnObtrusive Javascripting which basically means seperating as much as possible structure(HTML) and style(CSS) from Behaviour(JAVASCRIPT).
Althogh not a raw javascript solution, take a look at CoreMVC, the jQuery architechure of MVC.
CorMVC is a jQuery-powered
Model-View-Controller (MVC) framework
that can aide in the development of
single-page, web-based applications.
CorMVC stands for client-only-required
model-view-controller and is designed
to be lowest possible entry point to
learning about single-page application
architecture. It does not presuppose
any server-side technologies, or a web
server of any kind, and requires no
more than a web browser to get up and
running.
If you want a ready-made reference architecture that combines soem industry leading JS libraries with some good JS design patterns for large scale development, have a look at:
http://boilerplatejs.org/
I'm the main author of it and thought of sharing knowledge we gained after developing few large scale javascript products. It addresses following main concerns:
Solution structuring
Creating complex module hierarchy
Self contained UI components
Event based inter module communication
Routing, History, Bookmarking
Unit Testing
Localization
Document Generation