Part 1 React
What is the main idea?
- There are elements which should be small and have not too much logic in it, can be composed together to bigger elements, can hold a state, this means the element itself does not change, but it’s state can change, are stored in a React DOM
- For web applications, the real DOM gets compared with React DOM and only the change will be re-rendered, this makes ReactJs performant
- More complex elements are stored in ES6 classes
- A class can have a state, lifecycle methods (componentDidMount, componentWillUnmount, …)
- React can be used with JSX, which is a statically-typed, object-oriented programming language.
Part 1 React: Stability of the framework
- Already in version 15.4.2 of react
- Releases are in a monthly basis
Part 1 React: Existence of an active community and documentation quality
- Official Q&A via stackoverflow with over 1000 topics, 7200 posts, 3500 users (all time)
- On stackoverflow 27000 questions
- Overall 860 contributors in the github project
- almost 10000 forks, and 55000 github stars
- reddit topic with 17000 readers
- some websites
- official blog
- reactiflux chat
Part 1 React: Open source, licencing and feature of the framework
- Source code hosted on github
- BSD3 (with additional patent clause!)
Your license to use React.js can be revoked if you compete with Facebook
Part 1 React: Advanced UI widget library (AutoComplete, Layout managers, Grid etc…)
If you are asking this question it makes me suspect that you are assuming that React is an extensive framework, like Angular or Backbone, which it is not. React is strictly a tool for rendering the view (think of it as the V in MVC) and doesn’t really have anything to do with routing or anything like that. It will not really make it easier or harder to build a single-page app or not.
Part 1 React: Virtual DOM support
- Kind of a virtual DOM is implemented as the basic idea of React
- Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements.
Part 1 React: Themes and skinning support
- Matieral UI:
Belle - React components with great UX
Belle provides you with a set of React components like Toggle, ComboBox, Rating, TextInput, Button, Card, Select and…
- React Bootstrap
- Elemental UI
Part 1 React: Validations support
Part 1 React: Content lazy loading support
Part 1 React: Plugins support
Yes, this is the main aim of react
Part 1 React: Native mobile apps using react
- React can also render on the server using Node and power mobile apps using React Native.
- React Native (v 0.42) can be used for both iOS and Android on Mac, Linux and Windows
- There are a view big players are using React Native, such as: Facebook, Instagram, Airbnb, Baidu, Vogue
- FB mostly uses react because it’s their framework anyway
Part 1 React: The future of the framework
- Facebook is pushing react
- Google has a growing trend for reactjs:
Explore search interest for reactjs by time, location and popularity on Google Trends
- Compared to AngularJS, its still less:
Explore search interest for React, AngularJS by time, location and popularity on Google Trends
Part 1 React: Starter kits
react-starter-kit - React Starter Kit - isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel…
react-redux-starter-kit - Get started with React, Redux, and React-Router.
Part 1 React: Tooling
There are lots of complementary tools: which simplifies daily work with React (but can also cause a vendor lock-in to these plug-ins)
Part 1 React: Findings while deeper analysis:
For this analysis I’ve chosen https://github.com/kriasoft/react-starter-kit
- Code has high cohesion, at least in components.
- Sometimes this cohesion makes things harder (you have an app, with a list, the list has bunch of items, the item itself has some other components in it)
- you have at least 5 components here
- JSX makes things bit harder, I didn’t like it, most developers like something like a template (view) with some placeholders where the data (model) gets rendered into
- Integration of bootstrap was not straight forward (tried 30mins)
Part 1 React: Mostly combined with
React is combined mostly with:
Part 2 Angular
Angular material starter kit build with Angular 4 (developed by me):
Angular Material Starter Kit
1 week ago I started to work in a new project. For the frontend part I decided to use Angular 2 / 4 and Google material…
Angular 2.0 was announced at the ng-Europe conference 22–23. September 2014. The final version was released on September 14, 2016. Angular 2 is not a version upgrade, but a complete rewrite. The primary differences in Angular 2 over AngularJS are:
- Develop Across All Platforms (For web, hybrid mobile, native mobile and native desktop)
- Speed & Performance (Code generation, Web Workers and server-side rendering)
- Mobile development: Desktop development is much easier when mobile performance issues are handled first
- Modularity: Much core functionality has moved to modules, producing a lighter, faster core
- Modern browsers only : Reducing the need for browser compatibility workarounds
- Angular 2 recommends the use of Microsoft’s TypeScript language, which introduces the following improvements: * Class-based Object Oriented Programming * Static Typing * Generics * Lambdas etc…
- Improved dependency injection: Bindings make it possible for dependencies to be named
- Dynamic loading
- Asynchronous template compilation
- Simpler Routing
- Replaced controllers and $scope with components and directives : a component is a directive with a template
- Reactive programming support using RxJS
Part 2 Angular: Latest release
- As of today the latest Angular release is 4.0.0-rc.2
Part 2 Angular: UI Components
- Angular Material 2 (Material Design components built on top of Angular 2)
- Fuel-UI (Bootstrap 4 for Angular 2)
- Kendo UI for Angular 2 (One UI Toolkit for Web, Desktop and Mobile)
- PrimeNG (a collection of rich UI components for Angular 2)
- Semantic UI for Angular 2
- Onsen UI for Angular 2
Part 2 Angular: Data Libraries
- Angular 2 Fire database (Observable based, realtime bound, object based database)
- Apollo (Data stack for modern apps, built with GraphQL)
Part 2 Angular: Migration from Angular 1
- See my article about how to migrate from AngularJS to Angular 2
Part 2 Angular: Virtual DOM support
Part 2 Angular: Templating and Themes
- There are predefined template syntax but you can define your own template tags using directives
Part 2 Angular: Validations support
- Angular 2 built-in validators (required, minlength, maxlength, pattern)
- There are plugins such as ng2-validation (range, digits, number, url, email, date, json, phone …)
- You can also build your custom validators.
Part 2 Angular: Lazy loading
Lets assume we have two pages in our application, “home” and “admin”. Some people might never reach the admin page, so it makes sense to only serve the load of the admin page to people that actually need it or that have access to it. This is where we will use lazy loading.
Part 2 Angular: Plugins support
- Angular 2 plugins
Libraries - The Open Source Discovery Service
Libraries helps you find new open source libraries, modules and frameworks and keep track of ones you depend upon…
- Angular 2 modules
Modules Tagged with "angular2" - AngularJS Modules, Plugins and Directives
Angular Next brings the power of Angular 2 to Angular 1 and gives you an incremental migration path.
Part 2 Angular: Tooling
- Angular Universal (Server side rendering for Angular 2 apps)
- Augury (A Google Chrome Dev Tools extension for debugging Angular 2 applications)
- Codelyzer (A set of typescript lint rules for code analysis of Angular 2 TypeScript projects)
Part 2 Angular: Books
- Angular 2 Book
Become an impressive developer of the new Angular 2 web and mobile platform.This book will be updated continuously to…
- eBook Become a ninja with Angular 2
Become a ninja with Angular - the ebook
The amazing book about Angular, at 'pay what you want' price, DRM-free, and with support to charity, by Ninja Squad
- Learning Angular 2 Book
Learning Angular 2 | PACKT Books
Your quick, no-nonsense guide to building real-world apps with Angular 2
- Angular 2 in Action
Manning | Angular in Action
Angular in Action teaches you modern application development with Angular. You'll begin with the basics of Angular and…
- Testing Angular 2 Applications
Manning | Testing Angular Applications
Testing Angular Applications is an example-rich, hands-on guide that gives you the real-world techniques you need to…
- Angular 2 Development with TypeScript
Manning | Angular 2 Development with TypeScript
Whether you're building web clients or full-featured SPAs, using the Angular 2 web framework is a liberating experience…
- ng-book 2
ng-book 2: The Complete Book on Angular 2
Angular 2 for the beginner. Learn how to build websites with Angular 2 easily with this book. Angular 2 makes it…
- Rangle’s Angular 2 Training Book
Introduction · Rangle.io : Angular 2 Training
We developed this book to be used as course material for Rangle's Angular training, but many people have found it to be…
Part 2 Angular: Online Training
- Udemy courses
Online Courses - Anytime, Anywhere | Udemy
Udemy is the world's largest destination for online courses. Discover an online course on Udemy.com and start learning…
- Lynda courses
Bruce Heavin is the cofounder and chief innovation officer of lynda.com, overseeing the company's visual branding and…
Part 2 Angular: Community
- Official Google Group
Angular and AngularJS discussion
IRC Chatroom | Google+ | Twitter | YouTube Naming convention: Versions 1.x => AngularJS Versions 2+ => Angular…
- Instant messaging channels (#Angular2 the Freenode IRC Server, Slack channel for #Angular2 on DartLang network)
- Gitter Chat with 8551 Angular2 Developers
- Reddit community with little over 6200 members
- Subscription on ng-newsletter (the free, weekly newsletter of the best AngularJS content on the web)
- Stack Overflow (25,103 questions tagged)
- Issues reporting on github
- Events and Meetups
- Angular Camp
AngularCamp. July 2017 - Barcelona
AngularCamp is a set of events all around the world focused on everything related to Angular & Web Technologies
- Angular Air: A live video podcast all about Angular
Part 3 Ember
Ember.js: A framework for creating ambitious web applications.
Ember.js helps developers be more productive out of the box. Designed with developer ergonomics in mind, its friendly…
- Ember is an open source framework for web applications
- Ember is designed to help developers to create “ambitious web applications”
- Ember works respecting the MVC pattern (separation of responsibilities). It makes the application easier to:
Distribute and share the code with other developpers
Regroup all best community practices, standards and conventions and in the Ember framework
- Ember core team members participate in W3C committees specifications and standards
- Every member on Ember’s core team is actively working on one or more production apps that use Ember
Part 3 Ember: Knowledge required
- HTML 5
Part 3 Ember: Who is using it?
- Playstation now
- Apple help platform
- Apple music store
Part 3 Ember: Latest release
The latest release LTS (Long Time Support) release is v2.11.3 This version was released the 08.03.2017
Part 3 Ember: Frequency of public updates, fixes and releases
- Releases are in a monthly basis
Part 3 Ember: Main features
- A lot of things are “out of the box” with Ember CLI
- Project generation
- Testing (codemash)
- Development server
- Reusable templates
- IDEs support
- TDD possible
- Convention Over Configuration
- Ember Data library
- Model as ORMs with relationships on the client side
- If we respect the name convention in our model, we don’t have to worry about the fetching of data coming from the server
- Relationship video example →
104 - Ember Data 2.0: Relationships
One amazing ability of Ember Data is connecting your models together through relationships in such a way that you don't…
- Lazy loading possible for Model members for example:
- User has many Addresses
- We can load the User in one payload without Addresses
- And later load the Addresses in another payload
- Ember store
- The store is a central repository of models in the application
- Components and routes can ask the store for models, and the store is responsible for knowing how to fetch them
- You can think of the store as a read-through cache for your app’s models
- When a model is already present in the store, the data are not requested in the back-end (work like a cache). If we want to load again a model already present in the store, we have to inform the store explicitly
Part 3 Ember: Cross-Platform Development
- Ember-cli for Cordova
ember-cli-cordova - A tool for creating hybrid apps using a combination of ember-cli and cordova
Part 3 Ember: UI Components
- Inspired by Google Material Design
Material Design Lite
A front-end template that helps you build fast, modern mobile web apps.
- Semantic UI
Semantic empowers designers and developers by creating a shared vocabulary for UI.
- Bootstrap for Ember
Part 3 Ember: Data Libraries
- Support model with relationships
Part 3 Ember: Lazy loading
- Lazy loading on Model classes with relationship like ORMs object (see chapter Main features)
- Ember-cli lazy load
ember-cli-lazy-load - Support lazily loading your Ember app via splitting it up into Bundles
- Image lazy loading with Ember
Lazy Loading Images in Ember
Everyone likes beautifully crafted web sites with high resolution images. 500px, AirBnb, you name it. Having great…
Part 3 Ember: Deployment
- Ember-cli deploy does the job
Ember CLI Deploy · Deploy pipeline for Ember apps
Build, upload, activate. A simple pipeline that keeps your deploy logic maintainable and reusable.
Part 3 Ember: Virtual DOM support
- Ember uses Virtual DOM
Part 3 Ember: Validations support
- Ember model validator should do the job
ember-model-validator - ember-cli addon, which adds validation support to your Ember-Data models.
- Ember easy form
View the project on GitHub One of the more tedious tasks in Ember is writing forms. It is not uncommon to have to write…
- We can also build our custom validator extending an InputText object for example and implementing a custom validation
Emberjs and Validation
How are people handling client side validation and ember? Is there anything out of the box or a plugin that handles…
Part 3 Ember: Plugins support
- Ember Add-ons
Part 3 Ember: Tooling
- Configure a client-side REST server
Ember CLI Mirage · Develop and test your Ember app against a client-side server
- Spend less time wiring up HTTP stubs, and get back to developing your app
- Use factories to define your server’s state per test. Acceptance testing just got a whole lot easier
- Share a functional prototype of your app that runs entirely in the client, before writing a single line of your API
- Available for Firefox and Chrome, Ember Inspector is a handy extension to look into the state of a running Ember app. It offers a way to inspect:
- the template hierarchy
- the complete routes layout
- Ember Data’s store explorer
- deprecations, performance, and much more
Part 3 Ember: Books
- Just search on your favourite search engine :)
Part 3 Ember: Online Training
- A few videos are free
Video List- EmberScreencasts
Watch dozens of concise videos about Ember.js and the surrounding ecosystem.
- Just search on youtube :)
Part 3 Ember: Community
- Ember watch
Ember.js Talks on EmberWatch
Collection of resources for learning Ember.js including Videos, Talks, Slides, Tutorials, Posts and Screencasts.
- Stackoverflow 20,192 questions tagged
- Official discussion forum
- Simply google your question :)
Part 3 Ember: About the Ember core team member
Every member on Ember’s core team is actively working on one or more production apps that use Ember. It means that the core team is forced to experience all the joys and pains of using the framework, just like every other developer does. And this means the core team will naturally look out for the good of all developers using the framework.
Ember core team members participate in W3C committees specifications and standards.
Part 3 Ember: Guidance is set by those with the most experience
So here’s a question: Who do you want to set the guidance and best practices for using a framework? Developers with some experience using the framework or developers that actually created the framework?
That’s the difference between Angular and Ember.
Angular doesn’t provide much guidance on how to use the framework, so it becomes the wild west when a company first adopts Angular. Every team uses the framework however they see fit.
Part 3 Ember: Developper anecdote
Here’s a case in point: there are four development teams currently using Angular at my work place, and every team has structured their Angular app differently. There is no consistency even though we’re all using the same framework. And we have literally spent multiple days worth of time discussing and debating how our apps should be structured. And they are still not structured the same way.
Ember, on the other hand, has its guidance and best practices set by its core team members. And these guidances and best practices are baked directly into the framework, so it’s easy to follow.
Because Ember specifically defines how an application should be structured, the developers do not waste hours upon hours debating how an app should be structured. Instead they can spend that time actually developing the app and providing value to the business.
It also means new team members that already know Ember can become productive in any Ember app within minutes because they know how the app is structured and where to go to add a new feature or fix a bug. Like I shared above, after only spending a few hours learning Ember, I was able to browse and understand the structure of a large Ember application. That can’t be said for most developers learning Angular.
More precisely Vue.js version 2.
Introduction - Vue.js
Vue.js - Intuitive, Fast and Composable MVVM for building interactive interfaces.
Overview over all frameworks by Vue.js:
Comparison with Other Frameworks - Vue.js
Vue.js - Intuitive, Fast and Composable MVVM for building interactive interfaces.
An article about: Why we chose Vue.js
Why We Chose Vue.js
Used Vue.js webpack.
webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
Communication with rest service
vue.js-starter-template - A starter template for Vue.js projects
Stability of the framework, frequency of public updates and releases
Centralized around a small development team. Often releasing.
Existence of an active community, documentation quality and extensibility of the framework.
Community is mostly active on the surrounding plugins. Core plugins supported by core development team.
Open source, licensing and feature of the framework
Source code is available on GitHub
Development done mostly by Evan You, financed by
Evan is creating Vue.js | Patreon
Follow Evan on Patreon: Read posts by Evan on the world's largest platform enabling a new generation of creators and…
Advanced UI widget library (AutoComplete, Layout managers, Grid etc…)
Using existing UI frameworks can be integrated seamlessly. bootstrap, font-awesome, etc… Good example for this is the vue-material project:
Virtual DOM support
Themes and skinning support
Only through dynamic classes, styles and css.
vee-validate enables simple Vue.js 2.0 UI validation. More complex validations can be implemented as directives fairly easily.
Content lazy loading support
Depends on how webpack is used. It should be possible.
Based on plugin support.
Can we build native mobile apps using the same framework
There is a cordova demo available. Weex supports vue format.
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —-
Many thanks to Gabriel, Patrick, Matthieu and Emre for their help.
If you liked my article, don’t forget to clap, share or comment it. It’s important for me to reach more people. Please check my latest article: