forked from muddledsignal/class
-
Notifications
You must be signed in to change notification settings - Fork 0
UI Frameworks
Matthew McQuain edited this page Jan 28, 2019
·
1 revision
- This is my list of various UI frameworks and how we can use/incorporate them into our projects.
- TodoMVC helps us by providing a structured way of comparing JavaScript libraries and frameworks.
- Most frameworks give us an easy path to organizing our code using variations of the MVC (model-view-controller) pattern.
- MVC separates the concerns of an applications into three parts:
- Models that represent the domain-specific knowledge and data in an application. Models notify people observing them about their current state. Eg: Views
- Views are the user-interface in an application (eg: markup and templates), but not always. They should know about the existence of Models so that they can observe them, but they don't directly communicate with them.
- Controllers handle the input (eg: user actions) in an application and Views can be considered as handling the output. When a controller updates the state of a model (eg: editing a photo), it does not directly tell the View. This is what the observing nature of the View and Model relationship is for.
- Open-source front-end development framework that is used for developing dynamic single-page web applications (SPA).
- AngularJS transfers all the contents from the server to the browser, along with loading all the web pages simultaneously. Once the content is loaded, clicking any link on the page will not reload the entire page's contents. It will just update the sections w/in the page.
- Angular expects the browser to build the page, which mean less load on the server and faster loading of pages.
- Used by PayPal, LinkedIn, etc
- React is a library used for developing UI applications.
- Use React.js when a high performing enterprise application needs to be delivered to its users.
- Uses a UI like Instagram and Facebook.
- React is more flexible than Angular as developers will have to work with independent libraries with better response times.
- It's good when handling small and stateless functions that recieve an input and return elements as their output.
- Ember is a JavaScript front-end framework designed to help us build websites with interesting and complex user interactions.
- Another open-source framework that allows us to create a single page and large web applications.
- Highly opinionated framework and very flexible.
- Has a powerful routing system.
- Vue is a progressive JavaScript framework, meaning that if we have an existing server side application. We can plug view in to one specific part of the server.
- Allows us to split a web-page into reusable components.
- Approachable, versatile, and performant framework that allows us to keep and maintain a testable code base.
- Backbone gives structure to web applications via providing models with key-value binding and custom events.
- It has collections with many API functions, views with declarative event handling, and it connects everything to our existing API over a RESTful JSON interface.
- Its only dependency is Underscore.js, but should also be used with jQuery
- Knockout is open source, small/lightweight, and requires no dependencies.
- It uses declarative bindings to associate DOM elements with model data using readable syntax.
- Automatic UI refresh means that when our data model's state changes, our UI updates automatically.
- It uses dependency tracking, implicitly setting up chains of relationships between model data, allowing us to transform and combine it.
- These frameworks make agile development possible, providing well-organized, reusable, and maintainable code. These also use MVC (model-view-controller) pattern that ensures the separation of presentation and logic, and promotes modern web development practices.
- The most popular PHP framework.
- Useful for rapid application development and has a powerful templating engine, enabling common tasks (auth, caching, RESTful routing).
- Another popular PHP framework.
- Gives us a set of reusable PHP components and code.
- Useful for large-scale enterprise projects.