Alternatives to Quasar Framework logo

Alternatives to Quasar Framework

Vuetify, Ionic, Nuxt.js, React Native, and Flutter are the most popular alternatives and competitors to Quasar Framework.
300
480
+ 1
314

What is Quasar Framework and what are its top alternatives?

Build responsive Single Page Apps, SSR Apps, PWAs, Hybrid Mobile Apps and Electron Apps, all using the same codebase!, powered with Vue.
Quasar Framework is a tool in the Front-End Frameworks category of a tech stack.
Quasar Framework is an open source tool with 18.7K GitHub stars and 2.3K GitHub forks. Here’s a link to Quasar Framework's open source repository on GitHub

Top Alternatives to Quasar Framework

  • Vuetify

    Vuetify

    Vuetify is a component framework for Vue.js 2. It aims to provide clean, semantic and reusable components that make building your application a breeze. Vuetify utilizes Google's Material Design design pattern, taking cues from other popular frameworks such as Materialize.css, Material Design Lite, Semantic UI and Bootstrap 4. ...

  • Ionic

    Ionic

    Free and open source, Ionic offers a library of mobile and desktop-optimized HTML, CSS and JS components for building highly interactive apps. Use with Angular, React, Vue, or plain JavaScript. ...

  • Nuxt.js

    Nuxt.js

    Nuxt.js presets all the configuration needed to make your development of a Vue.js application enjoyable. You can use Nuxt.js for SSR, SPA, Static Generated, PWA and more. ...

  • React Native

    React Native

    React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about - learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native. ...

  • Flutter

    Flutter

    Flutter is a mobile app SDK to help developers and designers build modern mobile apps for iOS and Android. ...

  • Bootstrap

    Bootstrap

    Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. ...

  • Framework7

    Framework7

    It is a free and open source mobile HTML framework to develop hybrid mobile apps or web apps with iOS native look and feel. All you need to make it work is a simple HTML layout and attached framework's CSS and JS files. ...

  • NativeScript

    NativeScript

    NativeScript enables developers to build native apps for iOS, Android and Windows Universal while sharing the application code across the platforms. When building the application UI, developers use our libraries, which abstract the differences between the native platforms. ...

Quasar Framework alternatives & related posts

Vuetify logo

Vuetify

841
1.4K
134
Material Component Framework for VueJS 2
841
1.4K
+ 1
134
PROS OF VUETIFY
  • 26
    Enables beauty for graphically challenged devs
  • 22
    Wide range of components and active development
  • 18
    Vue
  • 14
    New age components
  • 10
    Easy integration
  • 10
    Material Design
  • 8
    Nuxt.js
  • 8
    Open Source
  • 5
    Not tied to jQuery
  • 3
    Awesome Documentation
  • 3
    Internationalization
  • 3
    Awesome Component collection
  • 2
    Not tied to jQuery
  • 2
    Best use of vue slots you'll ever see
CONS OF VUETIFY
  • 17
    It is heavy

related Vuetify posts

Simon Reymann
Senior Fullstack Developer at QUANTUSflow Software GmbH · | 19 upvotes · 575.1K views

Our whole Vue.js frontend stack (incl. SSR) consists of the following tools:

  • Nuxt.js consisting of Vue CLI, Vue Router, vuex, Webpack and Sass (Bundler for HTML5, CSS 3), Babel (Transpiler for JavaScript),
  • Vue Styleguidist as our style guide and pool of developed Vue.js components
  • Vuetify as Material Component Framework (for fast app development)
  • TypeScript as programming language
  • Apollo / GraphQL (incl. GraphiQL) for data access layer (https://apollo.vuejs.org/)
  • ESLint, TSLint and Prettier for coding style and code analyzes
  • Jest as testing framework
  • Google Fonts and Font Awesome for typography and icon toolkit
  • NativeScript-Vue for mobile development

The main reason we have chosen Vue.js over React and AngularJS is related to the following artifacts:

  • Empowered HTML. Vue.js has many similar approaches with Angular. This helps to optimize HTML blocks handling with the use of different components.
  • Detailed documentation. Vue.js has very good documentation which can fasten learning curve for developers.
  • Adaptability. It provides a rapid switching period from other frameworks. It has similarities with Angular and React in terms of design and architecture.
  • Awesome integration. Vue.js can be used for both building single-page applications and more difficult web interfaces of apps. Smaller interactive parts can be easily integrated into the existing infrastructure with no negative effect on the entire system.
  • Large scaling. Vue.js can help to develop pretty large reusable templates.
  • Tiny size. Vue.js weights around 20KB keeping its speed and flexibility. It allows reaching much better performance in comparison to other frameworks.
See more
Paul Whittemore
Developer and Owner at Appurist Software · | 15 upvotes · 664.1K views

I'm building most projects using: Server: either Fastify (all projects going forward) or ExpressJS on Node.js (existing, previously) on the server side, and Client app: either Vuetify (currently) or Quasar Framework (going forward) on Vue.js with vuex on Electron for the UI to deliver both web-based and desktop applications for multiple platforms.

The direct support for Android and iOS in Quasar Framework will make it my go-to client UI platform for any new client-side or web work. On the server, I'll probably use Fastly for all my server work, unless I get into Go more in the future.

Update: The mobile support in Quasar is not a sufficiently compelling reason to move me from Vuetify. I have decided to stick with Vuetify for a UI for Vue, as it is richer in components and enables a really great-looking professional result. For mobile platforms, I will just use Cordova to wrap the Vue+Vuetify app for mobile, and Electron to wrap it for desktop platforms.

See more
Ionic logo

Ionic

6.7K
6.1K
1.7K
A beautiful front-end framework for developing cross-platform apps with web technologies like Angular and React.
6.7K
6.1K
+ 1
1.7K
PROS OF IONIC
  • 246
    Allows for rapid prototyping
  • 226
    Hybrid mobile
  • 208
    It's angularjs
  • 184
    Free
  • 178
    It's javascript, html, and css
  • 108
    Ui and theming
  • 76
    Great designs
  • 74
    Mv* pattern
  • 70
    Reuse frontend devs on mobile
  • 64
    Extensibility
  • 31
    Great community
  • 28
    Open source
  • 22
    Responsive design
  • 20
    Good cli
  • 13
    Angularjs-based
  • 13
    Beautifully designed
  • 13
    So easy to use
  • 12
    Widgets
  • 11
    Allows for rapid prototyping, hybrid mobile
  • 11
    Typescript
  • 10
    Quick prototyping, amazing community
  • 10
    Easy setup
  • 8
    Angular2 support
  • 7
    Fast, easy, free
  • 7
    Because of the productivity and easy for development
  • 7
    So much thought behind what developers actually need
  • 7
    Base on angular
  • 6
    Super fast, their dev team is amazingly passionate
  • 6
    Easy to use
  • 6
    It's Angular
  • 4
    UI is awesome
  • 4
    Hot deploy
  • 3
    Material design support using theme
  • 3
    Amazing support
  • 3
    It's the future
  • 3
    Angular
  • 3
    Allow for rapid prototyping
  • 3
    Easy setup, development and testing
  • 3
    Ionic creator
  • 2
    User Friendly
  • 2
    It's angular js
  • 2
    Complete package
  • 2
    Simple & Fast
  • 2
    Fastest growing mobile app framework
  • 2
    Best Support and Community
  • 2
    Material Design By Default
  • 2
    Cross platform
  • 2
    Documentation
  • 2
    Because I can use my existing web devloper skills
  • 2
    Removes 300ms delay in mobile browsers
  • 1
    1
  • 1
    Native access
  • 1
    Typescript support
  • 1
    Ionic conect codeigniter
  • 1
    Fast Prototyping
  • 1
    All Trending Stack
CONS OF IONIC
  • 20
    Not suitable for high performance or UI intensive apps
  • 15
    Not meant for game development
  • 2
    Not a native app

related Ionic posts

Melanie Verstraete
Shared insights
on
Ionic
Flutter

Hi community, I am looking into how I should build my tech stack for a business/analytics platform. I am not very familiar with frontend development; when looking into cross-platform frameworks, I found a lot of options. What is the best cross-platform frontend framework to go with? I found Flutter interesting, but Ionic also looks promising? Thank you for the advice!

See more
Gaurav Patil
Software Developer at PLMTECH LOGIX Pvt. Ltd. · | 3 upvotes · 400.5K views

Which hybrid framework I should for my upcoming mobile application project?

Options: 1. Flutter 2. Ionic 3. React Native

See more
Nuxt.js logo

Nuxt.js

1.1K
1K
243
The Vue.js Framework
1.1K
1K
+ 1
243
PROS OF NUXT.JS
  • 37
    SSR
  • 33
    Automatic routes
  • 22
    Middleware
  • 20
    Hot code reloading
  • 16
    SPA
  • 16
    Easy setup, easy to use, great community, FRENCH TOUCH
  • 16
    Static Websites
  • 14
    Plugins
  • 12
    Code splitting for every page
  • 10
    Automatic transpilation and bundling (with webpack and
  • 10
    Custom layouts
  • 8
    Modules ecosystem
  • 7
    Easy setup
  • 6
    Pages directory
  • 6
    Vibrant and helpful community
  • 6
    Amazing Developer Experience
  • 3
    Not React
  • 1
    Its Great for Team Development
CONS OF NUXT.JS
    Be the first to leave a con

    related Nuxt.js posts

    Simon Reymann
    Senior Fullstack Developer at QUANTUSflow Software GmbH · | 19 upvotes · 575.1K views

    Our whole Vue.js frontend stack (incl. SSR) consists of the following tools:

    • Nuxt.js consisting of Vue CLI, Vue Router, vuex, Webpack and Sass (Bundler for HTML5, CSS 3), Babel (Transpiler for JavaScript),
    • Vue Styleguidist as our style guide and pool of developed Vue.js components
    • Vuetify as Material Component Framework (for fast app development)
    • TypeScript as programming language
    • Apollo / GraphQL (incl. GraphiQL) for data access layer (https://apollo.vuejs.org/)
    • ESLint, TSLint and Prettier for coding style and code analyzes
    • Jest as testing framework
    • Google Fonts and Font Awesome for typography and icon toolkit
    • NativeScript-Vue for mobile development

    The main reason we have chosen Vue.js over React and AngularJS is related to the following artifacts:

    • Empowered HTML. Vue.js has many similar approaches with Angular. This helps to optimize HTML blocks handling with the use of different components.
    • Detailed documentation. Vue.js has very good documentation which can fasten learning curve for developers.
    • Adaptability. It provides a rapid switching period from other frameworks. It has similarities with Angular and React in terms of design and architecture.
    • Awesome integration. Vue.js can be used for both building single-page applications and more difficult web interfaces of apps. Smaller interactive parts can be easily integrated into the existing infrastructure with no negative effect on the entire system.
    • Large scaling. Vue.js can help to develop pretty large reusable templates.
    • Tiny size. Vue.js weights around 20KB keeping its speed and flexibility. It allows reaching much better performance in comparison to other frameworks.
    See more
    Giordanna De Gregoriis
    Jr Fullstack Developer at Stefanini Inspiring · | 7 upvotes · 10.9K views

    TL;DR: Shall I keep developing with Nuxt.js 2 and wait for a migration guide to Nuxt 3? Or start developing with Vue.js 3 using Vite, and then migrate to Nuxt 3 when it comes out?

    Long version: We have an old web application running on AngularJS and Bootstrap for frontend. It is mostly a user interface to easily read and post data to our engine.

    We want to redo this web application. Started from scratch using the newest version of Angular 2+ and Material Design for frontend. We haven't even finished rewriting half of the application and it is becoming dreadful to work on.

    • The cold start takes too much time
    • Every little change reload the whole page. Seconds to minutes of development lost looking at a loading blank page just changing css
    • Code maintainability is getting worse... again... as the application grows, since we must create everytime 5 files for a new page (html, component.ts, module.ts, scss, routing.ts)

    I'm currently trying to code a Proof of Concept using Nuxt.js and Tailwind CSS. But the thing is, Vue.js 3 is out and has interesting features such as the composition API, teleport and fragments. Also we wish to use the Vite frontend tooling, to improve our time developing regardless of our application size. It feels like a better alternative to Webpack, which is what Nuxt 2 uses.

    I'm already trying Nuxt.js with the nuxt-vite experimental module, but many nuxt modules are still incompatible from the time I'm posting this. It is also becoming cumbersome not being able to use teleport or fragments, but that can be circumvented with good components.

    What I'm asking is, what should be the wisest decision: keep developing with Nuxt 2 and wait for a migration guide to Nuxt 3? Or start developing with Vue.js 3 using Vite, and then migrate to Nuxt 3 when it comes out?

    See more
    React Native logo

    React Native

    20.5K
    17.5K
    1.1K
    A framework for building native apps with React
    20.5K
    17.5K
    + 1
    1.1K
    PROS OF REACT NATIVE
    • 199
      Learn once write everywhere
    • 160
      Cross platform
    • 158
      Javascript
    • 115
      Native ios components
    • 66
      Built by facebook
    • 60
      Easy to learn
    • 43
      Bridges me into ios development
    • 39
      It's just react
    • 39
      No compile
    • 36
      Declarative
    • 20
      Fast
    • 12
      Virtual Dom
    • 12
      Livereload
    • 10
      Insanely fast develop / test cycle
    • 9
      Easy setup
    • 9
      Great community
    • 9
      Backed by Facebook
    • 9
      It is free and open source
    • 8
      Native android components
    • 7
      Highly customizable
    • 6
      Great errors
    • 6
      Scalable
    • 6
      Awesome
    • 6
      Win win solution of hybrid app
    • 6
      Everything component
    • 5
      Simple
    • 5
      Not dependent on anything such as Angular
    • 4
      OTA update
    • 4
      Awesome, easy starting from scratch
    • 3
      As good as Native without any performance concerns
    • 3
      Easy to use
    • 2
      Web development meets Mobile development
    • 2
      Can be incrementally added to existing native apps
    • 2
      Many salary
    • 2
      Hot reload
    • 2
      Over the air update (Flutter lacks)
    • 2
      'It's just react'
    • 1
      Ngon
    • 0
      Ful
    • 0
      Nigger
    CONS OF REACT NATIVE
    • 22
      Javascript
    • 17
      Built by facebook
    • 11
      Cant use CSS
    • 2
      Some compenents not truly native

    related React Native posts

    Vaibhav Taunk
    Team Lead at Technovert · | 31 upvotes · 1.5M views

    I am starting to become a full-stack developer, by choosing and learning .NET Core for API Development, Angular CLI / React for UI Development, MongoDB for database, as it a NoSQL DB and Flutter / React Native for Mobile App Development. Using Postman, Markdown and Visual Studio Code for development.

    See more

    I'm working as one of the engineering leads in RunaHR. As our platform is a Saas, we thought It'd be good to have an API (We chose Ruby and Rails for this) and a SPA (built with React and Redux ) connected. We started the SPA with Create React App since It's pretty easy to start.

    We use Jest as the testing framework and react-testing-library to test React components. In Rails we make tests using RSpec.

    Our main database is PostgreSQL, but we also use MongoDB to store some type of data. We started to use Redis  for cache and other time sensitive operations.

    We have a couple of extra projects: One is an Employee app built with React Native and the other is an internal back office dashboard built with Next.js for the client and Python in the backend side.

    Since we have different frontend apps we have found useful to have Bit to document visual components and utils in JavaScript.

    See more
    Flutter logo

    Flutter

    6.1K
    6.6K
    822
    Cross-platform mobile framework from Google
    6.1K
    6.6K
    + 1
    822
    PROS OF FLUTTER
    • 101
      Hot Reload
    • 84
      Cross platform
    • 80
      Performance
    • 69
      Backed by Google
    • 54
      Compiled into Native Code
    • 43
      Open Source
    • 40
      Fast Development
    • 38
      Fast Prototyping
    • 37
      Expressive and Flexible UI
    • 31
      Single Codebase
    • 28
      Reactive Programming
    • 22
      Material Design
    • 19
      Target to Fuchsia
    • 18
      Widget-based
    • 17
      Dart
    • 13
      IOS + Android
    • 11
      Great CLI Support
    • 10
      Tooling
    • 10
      Easy to learn
    • 9
      You can use it as mobile, web, Server development
    • 8
      Have built-in Material theme
    • 8
      Support by multiple IDE: Android Studio, VS Code, XCode
    • 8
      Debugging quickly
    • 7
      Easy Testing Support
    • 7
      Target to Android
    • 6
      Have built-in Cupertino theme
    • 6
      Written by Dart, which is easy to read code
    • 6
      Community
    • 6
      Good docs & sample code
    • 6
      Target to iOS
    • 5
      Easy to Unit Test
    • 5
      Real platform free framework of the future
    • 5
      Flutter is awesome
    • 5
      Easy to Widget Test
    CONS OF FLUTTER
    • 25
      Need to learn Dart
    • 10
      No 3D Graphics Engine Support
    • 9
      Lack of community support
    • 6
      Graphics programming
    • 5
      Lack of friendly documentation
    • 2
      Lack of promotion
    • 1
      Https://iphtechnologies.com/difference-between-flutter

    related Flutter posts

    Vaibhav Taunk
    Team Lead at Technovert · | 31 upvotes · 1.5M views

    I am starting to become a full-stack developer, by choosing and learning .NET Core for API Development, Angular CLI / React for UI Development, MongoDB for database, as it a NoSQL DB and Flutter / React Native for Mobile App Development. Using Postman, Markdown and Visual Studio Code for development.

    See more

    I've been juggling with an app idea and am clueless about how to build it.

    A little about the app:

    • Social network type app ,
    • Users can create different directories, in those directories post images and/or text that'll be shared on a public dashboard .

    Directory creation is the main point of this app. Besides there'll be rooms(groups),chatting system, search operations similar to instagram,push notifications

    I have two options:

    1. React Native, Python, AWS stack or
    2. Flutter, Go ( I don't know what stack or tools to use)
    See more
    Bootstrap logo

    Bootstrap

    52.2K
    11.4K
    7.6K
    Simple and flexible HTML, CSS, and JS for popular UI components and interactions
    52.2K
    11.4K
    + 1
    7.6K
    PROS OF BOOTSTRAP
    • 1.6K
      Responsiveness
    • 1.2K
      UI components
    • 943
      Consistent
    • 777
      Great docs
    • 677
      Flexible
    • 466
      HTML, CSS, and JS framework
    • 410
      Open source
    • 375
      Widely used
    • 368
      Customizable
    • 241
      HTML framework
    • 76
      Popular
    • 75
      Mobile first
    • 75
      Easy setup
    • 56
      Great grid system
    • 49
      Great community
    • 38
      Future compatibility
    • 34
      Integration
    • 27
      Very powerful foundational front-end framework
    • 24
      Standard
    • 23
      Javascript plugins
    • 19
      Build faster prototypes
    • 18
      Preprocessors
    • 13
      Grids
    • 8
      Clean
    • 7
      Good for a person who hates CSS
    • 4
      Rapid development
    • 4
      Easy to setup and learn
    • 4
      Love it
    • 2
      Clean and quick frontend development
    • 2
      Provide angular wrapper
    • 2
      Great and easy to use
    • 2
      Great and easy
    • 2
      Powerful grid system, Rapid development, Customization
    • 2
      Community
    • 2
      Great customer support
    • 2
      Popularity
    • 2
      Great and easy to make a responsive website
    • 2
      Sprzedam opla
    • 2
      Easy to use
    • 1
      Painless front end development
    • 1
      Responsive design
    • 1
      Reactjs
    • 1
      Geo
    • 1
      Design Agnostic
    • 1
      So clean and simple
    • 1
      Numerous components
    • 1
      Recognizable
    • 1
      Intuitive
    • 1
      Love the classes?
    • 1
      Material-ui
    • 1
      Pre-Defined components
    • 1
      Boostrap
    • 1
      It's fast
    • 1
      Felxible, comfortable, user-friendly
    • 1
      The fame
    • 1
      Easy setup2
    • 0
      Frefsd
    CONS OF BOOTSTRAP
    • 25
      Javascript is tied to jquery
    • 16
      Every site uses the defaults
    • 14
      Too much heavy decoration in default look
    • 14
      Grid system break points aren't ideal
    • 8
      Verbose styles

    related Bootstrap posts

    Ganesa Vijayakumar
    Full Stack Coder | Module Lead · | 18 upvotes · 2.3M views

    I'm planning to create a web application and also a mobile application to provide a very good shopping experience to the end customers. Shortly, my application will be aggregate the product details from difference sources and giving a clear picture to the user that when and where to buy that product with best in Quality and cost.

    I have planned to develop this in many milestones for adding N number of features and I have picked my first part to complete the core part (aggregate the product details from different sources).

    As per my work experience and knowledge, I have chosen the followings stacks to this mission.

    UI: I would like to develop this application using React, React Router and React Native since I'm a little bit familiar on this and also most importantly these will help on developing both web and mobile apps. In addition, I'm gonna use the stacks JavaScript, jQuery, jQuery UI, jQuery Mobile, Bootstrap wherever required.

    Service: I have planned to use Java as the main business layer language as I have 7+ years of experience on this I believe I can do better work using Java than other languages. In addition, I'm thinking to use the stacks Node.js.

    Database and ORM: I'm gonna pick MySQL as DB and Hibernate as ORM since I have a piece of good knowledge and also work experience on this combination.

    Search Engine: I need to deal with a large amount of product data and it's in-detailed info to provide enough details to end user at the same time I need to focus on the performance area too. so I have decided to use Solr as a search engine for product search and suggestions. In addition, I'm thinking to replace Solr by Elasticsearch once explored/reviewed enough about Elasticsearch.

    Host: As of now, my plan to complete the application with decent features first and deploy it in a free hosting environment like Docker and Heroku and then once it is stable then I have planned to use the AWS products Amazon S3, EC2, Amazon RDS and Amazon Route 53. I'm not sure about Microsoft Azure that what is the specialty in it than Heroku and Amazon EC2 Container Service. Anyhow, I will do explore these once again and pick the best suite one for my requirement once I reached this level.

    Build and Repositories: I have decided to choose Apache Maven and Git as these are my favorites and also so popular on respectively build and repositories.

    Additional Utilities :) - I would like to choose Codacy for code review as their Startup plan will be very helpful to this application. I'm already experienced with Google CheckStyle and SonarQube even I'm looking something on Codacy.

    Happy Coding! Suggestions are welcome! :)

    Thanks, Ganesa

    See more
    Francisco Quintero
    Tech Lead at Dev As Pros · | 13 upvotes · 697.3K views

    For Etom, a side project. We wanted to test an idea for a future and bigger project.

    What Etom does is searching places. Right now, it leverages the Google Maps API. For that, we found a React component that makes this integration easy because using Google Maps API is not possible via normal API requests.

    You kind of need a map to work as a proxy between the software and Google Maps API.

    We hate configuration(coming from Rails world) so also decided to use Create React App because setting up a React app, with all the toys, it's a hard job.

    Thanks to all the people behind Create React App it's easier to start any React application.

    We also chose a module called Reactstrap which is Bootstrap UI in React components.

    An important thing in this side project(and in the bigger project plan) is to measure visitor through out the app. For that we researched and found that Keen was a good choice(very good free tier limits) and also it is very simple to setup and real simple to send data to

    Slack and Trello are our defaults tools to comunicate ideas and discuss topics, so, no brainer using them as well for this project.

    See more
    Framework7 logo

    Framework7

    123
    273
    170
    Full Featured HTML Framework For Building iOS Apps
    123
    273
    + 1
    170
    PROS OF FRAMEWORK7
    • 21
      Free and open source
    • 20
      Well designed
    • 17
      Material design
    • 15
      Lots of ready-to-use ui elements, easy to customize
    • 12
      Best performance
    • 11
      Amazing documentation
    • 9
      Rtl support
    • 9
      Performance and great features.
    • 9
      Nice look and best performance
    • 7
      Free
    • 6
      Basic Web App Development Technique
    • 6
      Easy To Learn
    • 6
      Nice sample provided
    • 5
      Quick inital time
    • 5
      Easy to use , transit from vanilla JS
    • 5
      Doesn't require learning a JS framework
    • 5
      It's feels light to use
    • 2
      Easy to integrate
    CONS OF FRAMEWORK7
    • 1
      Not suitable for high performance in PWA. desktop apps

    related Framework7 posts

    Jonathan Pugh
    Software Engineer / Project Manager / Technical Architect · | 25 upvotes · 1.4M views

    I needed to choose a full stack of tools for cross platform mobile application design & development. After much research and trying different tools, these are what I came up with that work for me today:

    For the client coding I chose Framework7 because of its performance, easy learning curve, and very well designed, beautiful UI widgets. I think it's perfect for solo development or small teams. I didn't like React Native. It felt heavy to me and rigid. Framework7 allows the use of #CSS3, which I think is the best technology to come out of the #WWW movement. No other tech has been able to allow designers and developers to develop such flexible, high performance, customisable user interface elements that are highly responsive and hardware accelerated before. Now #CSS3 includes variables and flexboxes it is truly a powerful language and there is no longer a need for preprocessors such as #SCSS / #Sass / #less. React Native contains a very limited interpretation of #CSS3 which I found very frustrating after using #CSS3 for some years already and knowing its powerful features. The other very nice feature of Framework7 is that you can even build for the browser if you want your app to be available for desktop web browsers. The latest release also includes the ability to build for #Electron so you can have MacOS, Windows and Linux desktop apps. This is not possible with React Native yet.

    Framework7 runs on top of Apache Cordova. Cordova and webviews have been slated as being slow in the past. Having a game developer background I found the tweeks to make it run as smooth as silk. One of those tweeks is to use WKWebView. Another important one was using srcset on images.

    I use #Template7 for the for the templating system which is a no-nonsense mobile-centric #HandleBars style extensible templating system. It's easy to write custom helpers for, is fast and has a small footprint. I'm not forced into a new paradigm or learning some new syntax. It operates with standard JavaScript, HTML5 and CSS 3. It's written by the developer of Framework7 and so dovetails with it as expected.

    I configured TypeScript to work with the latest version of Framework7. I consider TypeScript to be one of the best creations to come out of Microsoft in some time. They must have an amazing team working on it. It's very powerful and flexible. It helps you catch a lot of bugs and also provides code completion in supporting IDEs. So for my IDE I use Visual Studio Code which is a blazingly fast and silky smooth editor that integrates seamlessly with TypeScript for the ultimate type checking setup (both products are produced by Microsoft).

    I use Webpack and Babel to compile the JavaScript. TypeScript can compile to JavaScript directly but Babel offers a few more options and polyfills so you can use the latest (and even prerelease) JavaScript features today and compile to be backwards compatible with virtually any browser. My favorite recent addition is "optional chaining" which greatly simplifies and increases readability of a number of sections of my code dealing with getting and setting data in nested objects.

    I use some Ruby scripts to process images with ImageMagick and pngquant to optimise for size and even auto insert responsive image code into the HTML5. Ruby is the ultimate cross platform scripting language. Even as your scripts become large, Ruby allows you to refactor your code easily and make it Object Oriented if necessary. I find it the quickest and easiest way to maintain certain aspects of my build process.

    For the user interface design and prototyping I use Figma. Figma has an almost identical user interface to #Sketch but has the added advantage of being cross platform (MacOS and Windows). Its real-time collaboration features are outstanding and I use them a often as I work mostly on remote projects. Clients can collaborate in real-time and see changes I make as I make them. The clickable prototyping features in Figma are also very well designed and mean I can send clickable prototypes to clients to try user interface updates as they are made and get immediate feedback. I'm currently also evaluating the latest version of #AdobeXD as an alternative to Figma as it has the very cool auto-animate feature. It doesn't have real-time collaboration yet, but I heard it is proposed for 2019.

    For the UI icons I use Font Awesome Pro. They have the largest selection and best looking icons you can find on the internet with several variations in styles so you can find most of the icons you want for standard projects.

    For the backend I was using the #GraphCool Framework. As I later found out, #GraphQL still has some way to go in order to provide the full power of a mature graph query language so later in my project I ripped out #GraphCool and replaced it with CouchDB and Pouchdb. Primarily so I could provide good offline app support. CouchDB with Pouchdb is very flexible and efficient combination and overcomes some of the restrictions I found in #GraphQL and hence #GraphCool also. The most impressive and important feature of CouchDB is its replication. You can configure it in various ways for backups, fault tolerance, caching or conditional merging of databases. CouchDB and Pouchdb even supports storing, retrieving and serving binary or image data or other mime types. This removes a level of complexity usually present in database implementations where binary or image data is usually referenced through an #HTML5 link. With CouchDB and Pouchdb apps can operate offline and sync later, very efficiently, when the network connection is good.

    I use PhoneGap when testing the app. It auto-reloads your app when its code is changed and you can also install it on Android phones to preview your app instantly. iOS is a bit more tricky cause of Apple's policies so it's not available on the App Store, but you can build it and install it yourself to your device.

    So that's my latest mobile stack. What tools do you use? Have you tried these ones?

    See more
    Michell Jose Gutierrez Rincon
    web & mobile developer at Freelancer · | 1 upvote · 68.3K views
    Shared insights
    on
    Framework7
    Apache Cordova

    Working with Framework7, Apache Cordova

    See more
    NativeScript logo

    NativeScript

    494
    951
    497
    Build truly native apps with JavaScript
    494
    951
    + 1
    497
    PROS OF NATIVESCRIPT
    • 74
      Access to the entire native api
    • 46
      Support for native ios and android libraries
    • 45
      Support for javascript libraries
    • 45
      Angular 2.0 support
    • 43
      Native ux and performance
    • 36
      Typescript support
    • 34
      Backed up by google and telerik
    • 29
      Css support
    • 26
      Cross-platform declarative ui and code
    • 24
      Fully open source under apache 2.0 license
    • 11
      Vuejs support
    • 8
      60fps performance
    • 5
      Powerful data visualization with native UI
    • 5
      VS Code integration
    • 4
      Extended CLI support
    • 4
      Cloud builds as part of Telerik PLatform
    • 4
      No need for Mac to build iOS apps in Telerik Platform
    • 4
      Angular, typescript and javascript support
    • 3
      Extensibility
    • 3
      0 day support for new OS updates
    • 3
      On-device debugging
    • 3
      Publishing modules to NPM
    • 3
      Easiest of all other frameworks
    • 3
      Backed by google
    • 3
      Truly Object-Oriented with Typescript
    • 2
      Access to entire native api
    • 2
      VueJS support
    • 2
      Svelte support
    • 2
      Powerfull mobile services as part of Telerik Platform
    • 2
      Live reload
    • 2
      Native ui with angular
    • 2
      Easy to learn
    • 2
      Vue.js support out of the box
    • 2
      Vue support
    • 1
      HMR via webpack
    • 1
      It works with Angular
    • 1
      Easy to use, support for almost all npm packages
    • 1
      Very small app size
    • 1
      Write once, use anywhere
    • 1
      Compile to Apple/Google Stores via CloudCompiler
    • 1
      Hot Reload
    • 1
      Code reuse with your website
    • 1
      Rich ecosystem
    • 1
      Playground
    • 1
      Has CSS ;-)
    • 0
      Dart
    CONS OF NATIVESCRIPT
    • 5
      Lack of promotion
    • 1
      Slower Performance compared to competitors

    related NativeScript posts

    leonardo silveira
    Software Engineer at Casa Magalhães · | 5 upvotes · 167.4K views

    So, i am preparing to adopt NativeScript.

    For years my hybrid projects used Apache Cordova.

    "Let's avoid to maintain two teams and double the deliver velocity".

    It was good for a few years, we had those september issues, (i.e. apple broke some backward compatibility) , but for the last years, things seems to be losing the grip faster.

    Last breaking changes, for instance, seems to have a workaround, however that growing feeling that simple things can not rely on so fragile webviews keeps growing faster and faster.

    I've tested nativescript not only on it's "helloworld", but also on how do they respond on issues.

    I got tweed support. I opened an github issue and got answers on less than 10 hours (yes i did it on another timezone and very close to a weekend). I saw the faulty docs get corrected in two days.

    The bad news is i only can adopt nativescript on newer projects, since there is no budget to revamp the current solutions.

    The good news is i can keep coding on Vue.js , without vou router, but that's ok. I've already exchanged vanilla html for real native app with background magic enabled, the router can be easily reproduced.

    See more