Alternatives to Framework7 logo

Alternatives to Framework7

Ionic, React Native, jQuery Mobile, Bootstrap, and AngularJS are the most popular alternatives and competitors to Framework7.
66
89
+ 1
94

What is Framework7 and what are its top alternatives?

Framework7 - 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! Framework7 doesn't force you to write some custom tags that will be converted by JavaScript to something else.
Framework7 is a tool in the Cross-Platform Mobile Development category of a tech stack.
Framework7 is an open source tool with 14.9K GitHub stars and 3.1K GitHub forks. Here’s a link to Framework7's open source repository on GitHub

Framework7 alternatives & related posts

Ionic logo

Ionic

3.2K
2.7K
1.7K
3.2K
2.7K
+ 1
1.7K
A beautiful front-end framework for developing cross-platform apps with web technologies like Angular and React.
Ionic logo
Ionic
VS
Framework7 logo
Framework7

related Ionic posts

Gaurav Patil
Gaurav Patil
Software Developer at PLMTECH LOGIX Pvt. Ltd. · | 2 upvotes · 30.9K views
atPLM Logix Pvt. Ltd.PLM Logix Pvt. Ltd.
React Native
React Native
Ionic
Ionic
Flutter
Flutter

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

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

See more
Ionic
Ionic
React Native
React Native

Hello dear , what is the best to build marketplace buy sell app like carousell , 5mails , letgo ? React Native Or Ionic or what ? or the best build native from the beginning ? i want my apps like native apps ? and

See more

related React Native posts

Vaibhav Taunk
Vaibhav Taunk
Team Lead at Technovert · | 24 upvotes · 62.2K views
Visual Studio Code
Visual Studio Code
Markdown
Markdown
Postman
Postman
React Native
React Native
Flutter
Flutter
MongoDB
MongoDB
React
React
Angular CLI
Angular CLI
.NET Core
.NET Core

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
Vishal Narkhede
Vishal Narkhede
Javascript Developer at getStream.io · | 19 upvotes · 87.5K views
atStreamStream
Babel
Babel
styled-components
styled-components
Expo
Expo
JavaScript
JavaScript
Chat by Stream
Chat by Stream
React Native
React Native
Stream
Stream

Recently, the team at Stream published a React Native SDK for our new Chat by Stream product. React Native brings the power of JavaScript to the world of mobile development, making it easy to develop apps for multiple platforms. We decided to publish two different endpoints for the SDK – Expo and React Native (non-expo), to avoid the hurdle and setup of using the Expo library in React Native only projects on the consumer side.

The capability of style customization is one a large deal breaker for frontend SDKs. To solve this, we decided to use styled-components in our SDK, which makes it easy to add support for themes on top of our existing components. This practice reduces the maintenance effort for stylings of custom components and keeps the overall codebase clean.

For module bundling, we decided to go with Rollup.js instead of Webpack due to its simplicity and performance in the area of library/module providers. We are using Babel for transpiling code, enabling our team to use JavaScript's next-generation features. Additionally, we are using the React Styleguidist component documentation, which makes documenting the React Native code a breeze.

See more
jQuery Mobile logo

jQuery Mobile

1.3K
189
0
1.3K
189
+ 1
0
Touch-Optimized Web Framework for Smartphones & Tablets
    Be the first to leave a pro
    jQuery Mobile logo
    jQuery Mobile
    VS
    Framework7 logo
    Framework7

    related jQuery Mobile posts

    Ganesa Vijayakumar
    Ganesa Vijayakumar
    Full Stack Coder | Module Lead · | 15 upvotes · 401K views
    SonarQube
    SonarQube
    Codacy
    Codacy
    Docker
    Docker
    Git
    Git
    Apache Maven
    Apache Maven
    Amazon EC2 Container Service
    Amazon EC2 Container Service
    Microsoft Azure
    Microsoft Azure
    Amazon Route 53
    Amazon Route 53
    Elasticsearch
    Elasticsearch
    Solr
    Solr
    Amazon RDS
    Amazon RDS
    Amazon S3
    Amazon S3
    Heroku
    Heroku
    Hibernate
    Hibernate
    MySQL
    MySQL
    Node.js
    Node.js
    Java
    Java
    Bootstrap
    Bootstrap
    jQuery Mobile
    jQuery Mobile
    jQuery UI
    jQuery UI
    jQuery
    jQuery
    JavaScript
    JavaScript
    React Native
    React Native
    React Router
    React Router
    React
    React

    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
    Bootstrap logo

    Bootstrap

    49.9K
    7K
    7.5K
    49.9K
    7K
    + 1
    7.5K
    Simple and flexible HTML, CSS, and JS for popular UI components and interactions
    Bootstrap logo
    Bootstrap
    VS
    Framework7 logo
    Framework7

    related Bootstrap posts

    Ganesa Vijayakumar
    Ganesa Vijayakumar
    Full Stack Coder | Module Lead · | 15 upvotes · 401K views
    SonarQube
    SonarQube
    Codacy
    Codacy
    Docker
    Docker
    Git
    Git
    Apache Maven
    Apache Maven
    Amazon EC2 Container Service
    Amazon EC2 Container Service
    Microsoft Azure
    Microsoft Azure
    Amazon Route 53
    Amazon Route 53
    Elasticsearch
    Elasticsearch
    Solr
    Solr
    Amazon RDS
    Amazon RDS
    Amazon S3
    Amazon S3
    Heroku
    Heroku
    Hibernate
    Hibernate
    MySQL
    MySQL
    Node.js
    Node.js
    Java
    Java
    Bootstrap
    Bootstrap
    jQuery Mobile
    jQuery Mobile
    jQuery UI
    jQuery UI
    jQuery
    jQuery
    JavaScript
    JavaScript
    React Native
    React Native
    React Router
    React Router
    React
    React

    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
    Francisco Quintero
    Tech Lead at Dev As Pros · | 13 upvotes · 147.1K views
    atDev As ProsDev As Pros
    Trello
    Trello
    Slack
    Slack
    Keen
    Keen
    Bootstrap
    Bootstrap
    Create React App
    Create React App
    React
    React
    Google Maps
    Google Maps

    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
    AngularJS logo

    AngularJS

    19.1K
    11.6K
    5.2K
    19.1K
    11.6K
    + 1
    5.2K
    Superheroic JavaScript MVW Framework
    AngularJS logo
    AngularJS
    VS
    Framework7 logo
    Framework7

    related AngularJS posts

    Jake Stein
    Jake Stein
    CEO at Stitch · | 15 upvotes · 76.4K views
    atStitchStitch
    ES6
    ES6
    JavaScript
    JavaScript
    CoffeeScript
    CoffeeScript
    React
    React
    AngularJS
    AngularJS

    Stitch’s frontend is used to configure data sources and destinations and monitor the status of each. Although we have been using AngularJS since its early days, we recently introduced React components into our front end, which many of our developers find easier to work with. We started using CoffeeScript when it was one of the few options for a more expressive alternative to vanilla JavaScript, but today we opt to instead write new code in ES6, which we feel is a more mature alternative.

    See more
    Arik Fraimovich
    Arik Fraimovich
    Vue.js
    Vue.js
    React
    React
    Angular 2
    Angular 2
    AngularJS
    AngularJS

    When Redash was created 5 years ago we chose AngularJS as our frontend framework, but as AngularJS was replaced by Angular 2 we had to make a new choice. We decided that we won't migrate to Angular, but to either React or Vue.js. Eventually we decided to migrate to React for the following reasons:

    1. Many in our community are already using React internally and will be able to contribute.
    2. Using react2angular we can do the migration gradually over time instead of having to invest in a big rewrite while halting feature development.

    So far the gradual strategy pays off and in the last 3 major releases we already shipped React code in the Angular.js application.

    See more

    related Xamarin posts

    Greg Neumann
    Greg Neumann
    Indie, Solo, Developer · | 6 upvotes · 71.4K views
    TypeScript
    TypeScript
    Vue.js
    Vue.js
    Electron
    Electron
    Quasar Framework
    Quasar Framework
    ASP.NET
    ASP.NET
    Xamarin Forms
    Xamarin Forms
    .NET Core
    .NET Core
    Xamarin
    Xamarin

    Finding the most effective dev stack for a solo developer. Over the past year, I've been looking at many tech stacks that would be 'best' for me, as a solo, indie, developer to deliver a desktop app (Windows & Mac) plus mobile - iOS mainly. Initially, Xamarin started to stand-out. Using .NET Core as the run-time, Xamarin as the native API provider and Xamarin Forms for the UI seemed to solve all issues. But, the cracks soon started to appear. Xamarin Forms is mobile only; the Windows incarnation is different. There is no Mac UI solution (you have to code it natively in Mac OS Storyboard. I was also worried how Xamarin Forms , if I was to use it, was going to cope, in future, with Apple's new SwiftUI and Google's new Fuchsia.

    This plethora of techs for the UI-layer made me reach for the safer waters of using Web-techs for the UI. Lovely! Consistency everywhere (well, mostly). But that consistency evaporates when platform issues are addressed. There are so many web frameworks!

    But, I made a simple decision. It's just me...I am clever, but there is no army of coders here. And I have big plans for a business app. How could just 1 developer go-on to deploy a decent app to Windows, iPhone, iPad & Mac OS? I remembered earlier days when I've used Microsoft's ASP.NET to scaffold - generate - loads of Code for a web-app that I needed for several charities that I worked with. What 'generators' exist that do a lot of the platform-specific rubbish, allow the necessary customisation of such platform integration and provide a decent UI?

    I've placed my colours to the Quasar Framework mast. Oh dear, that means Electron desktop apps doesn't it? Well, Ive had enough of loads of Developers saying that "the menus won't look native" or "it uses too much RAM" and so on. I've been using non-native UI-wrapped apps for ages - the date picker in Outlook on iOS is way better than the native date-picker and I'd been using it for years without getting hot under the collar about it. Developers do get so hung-up on things that busy Users hardly notice; don't you think?. As to the RAM usage issue; that's a bit true. But Users only really notice when an app uses so much RAM that the machine starts to page-out. Electron contributes towards that horizon but does not cause it. My Users will be business-users after all. Somewhat decent machines.

    Looking forward to all that lovely Vue.js around my TypeScript and all those really, really, b e a u t I f u l UI controls of Quasar Framework . Still not sure that 1 dev can deliver all that... but I'm up for trying...

    See more

    related Flutter posts

    Vaibhav Taunk
    Vaibhav Taunk
    Team Lead at Technovert · | 24 upvotes · 62.2K views
    Visual Studio Code
    Visual Studio Code
    Markdown
    Markdown
    Postman
    Postman
    React Native
    React Native
    Flutter
    Flutter
    MongoDB
    MongoDB
    React
    React
    Angular CLI
    Angular CLI
    .NET Core
    .NET Core

    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
    Sezgi Uluçam
    Sezgi Uluçam
    Sr. Software Engineer at StackShare · | 6 upvotes · 58K views
    Flutter
    Flutter
    React Native
    React Native
    PhoneGap
    PhoneGap
    Apache Cordova
    Apache Cordova
    #NativeApps
    #MobileFrameworks
    #JavaScript

    For a front end dev like me, using a mobile framework for side projects makes more sense than writing a native app. I had used Apache Cordova (formerly PhoneGap) before (because React Native didn't exist yet), and was happy with it. But once React Native came out, it made more sense to go that way instead. It's more efficient and smooth, since it doesn't have the simulation overhead, and has more access to hardware features. It feels cleaner since you don't need to deal with #WebView, using native UI widgets directly. I also considered Flutter . It looks promising, but is relatively new to the game, and React Native seems more stable for now.

    MobileFrameworks #JavaScript NativeApps

    See more

    related Apache Cordova posts

    Jonathan Pugh
    Jonathan Pugh
    Software Engineer / Project Manager / Technical Architect · | 19 upvotes · 189.3K views
    Pouchdb
    Pouchdb
    CouchDB
    CouchDB
    Font Awesome
    Font Awesome
    CSS 3
    CSS 3
    Apache Cordova
    Apache Cordova
    PhoneGap
    PhoneGap
    HTML5
    HTML5
    Ruby
    Ruby
    Babel
    Babel
    Webpack
    Webpack
    Visual Studio Code
    Visual Studio Code
    Figma
    Figma
    TypeScript
    TypeScript
    JavaScript
    JavaScript
    Framework7
    Framework7
    #Css
    #CSS3
    #SCSS
    #Sass
    #Less
    #Electron
    #HandleBars
    #Template7
    #Sketch
    #GraphQL
    #HTML5
    #GraphCool

    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
    Apache Cordova
    Apache Cordova
    redux-saga
    redux-saga
    React Native
    React Native
    AngularJS
    AngularJS
    Redux
    Redux
    React
    React
    #JavascriptMvcFrameworks

    We had contemplated a long time which #JavascriptMvcFrameworks to use, React and React Native vs AngularJS and Apache Cordova in both web and mobile. Eventually we chose react over angular since it was quicker to learn, less code for simple apps and quicker integration of third party javascript modules. for the full MVC we added Redux.js for state management and redux-saga for async calls and logic. since we also have mobile app along with the web, we can shere logic and model between web and mobile.

    See more

    related PhoneGap posts

    Jonathan Pugh
    Jonathan Pugh
    Software Engineer / Project Manager / Technical Architect · | 19 upvotes · 189.3K views
    Pouchdb
    Pouchdb
    CouchDB
    CouchDB
    Font Awesome
    Font Awesome
    CSS 3
    CSS 3
    Apache Cordova
    Apache Cordova
    PhoneGap
    PhoneGap
    HTML5
    HTML5
    Ruby
    Ruby
    Babel
    Babel
    Webpack
    Webpack
    Visual Studio Code
    Visual Studio Code
    Figma
    Figma
    TypeScript
    TypeScript
    JavaScript
    JavaScript
    Framework7
    Framework7
    #Css
    #CSS3
    #SCSS
    #Sass
    #Less
    #Electron
    #HandleBars
    #Template7
    #Sketch
    #GraphQL
    #HTML5
    #GraphCool

    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
    Sezgi Uluçam
    Sezgi Uluçam
    Sr. Software Engineer at StackShare · | 6 upvotes · 58K views
    Flutter
    Flutter
    React Native
    React Native
    PhoneGap
    PhoneGap
    Apache Cordova
    Apache Cordova
    #NativeApps
    #MobileFrameworks
    #JavaScript

    For a front end dev like me, using a mobile framework for side projects makes more sense than writing a native app. I had used Apache Cordova (formerly PhoneGap) before (because React Native didn't exist yet), and was happy with it. But once React Native came out, it made more sense to go that way instead. It's more efficient and smooth, since it doesn't have the simulation overhead, and has more access to hardware features. It feels cleaner since you don't need to deal with #WebView, using native UI widgets directly. I also considered Flutter . It looks promising, but is relatively new to the game, and React Native seems more stable for now.

    MobileFrameworks #JavaScript NativeApps

    See more

    related NativeScript posts

    leonardo silveira
    leonardo silveira
    Software Engineer at Casa Magalhães · | 2 upvotes · 32.7K views
    Vue.js
    Vue.js
    Apache Cordova
    Apache Cordova
    NativeScript
    NativeScript

    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
    Expo logo

    Expo

    195
    148
    23
    195
    148
    + 1
    23
    Making React Native Easier
    Expo logo
    Expo
    VS
    Framework7 logo
    Framework7

    related Expo posts

    Vishal Narkhede
    Vishal Narkhede
    Javascript Developer at getStream.io · | 19 upvotes · 87.5K views
    atStreamStream
    Babel
    Babel
    styled-components
    styled-components
    Expo
    Expo
    JavaScript
    JavaScript
    Chat by Stream
    Chat by Stream
    React Native
    React Native
    Stream
    Stream

    Recently, the team at Stream published a React Native SDK for our new Chat by Stream product. React Native brings the power of JavaScript to the world of mobile development, making it easy to develop apps for multiple platforms. We decided to publish two different endpoints for the SDK – Expo and React Native (non-expo), to avoid the hurdle and setup of using the Expo library in React Native only projects on the consumer side.

    The capability of style customization is one a large deal breaker for frontend SDKs. To solve this, we decided to use styled-components in our SDK, which makes it easy to add support for themes on top of our existing components. This practice reduces the maintenance effort for stylings of custom components and keeps the overall codebase clean.

    For module bundling, we decided to go with Rollup.js instead of Webpack due to its simplicity and performance in the area of library/module providers. We are using Babel for transpiling code, enabling our team to use JavaScript's next-generation features. Additionally, we are using the React Styleguidist component documentation, which makes documenting the React Native code a breeze.

    See more
    Sezgi Uluçam
    Sezgi Uluçam
    Sr. Software Engineer at StackShare · | 6 upvotes · 73.2K views
    Android SDK
    Android SDK
    Android Studio
    Android Studio
    React Native
    React Native
    Xcode
    Xcode
    Expo
    Expo

    I've recently switched to using Expo for initializing and developing my React Native apps. Compared to React Native CLI, it's so much easier to get set up and going. Setting up and maintaining Android Studio, Android SDK, and virtual devices used to be such a headache. Thanks to Expo, I can now test my apps directly on my Android phone, just by installing the Expo app. I still use Xcode Simulator for iOS testing, since I don't have an iPhone, but that's easy anyway. The big win for me with Expo is ease of Android testing.

    The Expo SDK also provides convenient features like Facebook login, MapView, push notifications, and many others. https://docs.expo.io/versions/v31.0.0/sdk/

    See more
    Web Starter Kit logo

    Web Starter Kit

    140
    158
    3
    140
    158
    + 1
    3
    Boilerplate & Tooling for Multi-Device Development
    Web Starter Kit logo
    Web Starter Kit
    VS
    Framework7 logo
    Framework7
    Create React Native App logo

    Create React Native App

    61
    109
    0
    61
    109
    + 1
    0
    Create a React Native app on any OS with no build config
      Be the first to leave a pro
      Create React Native App logo
      Create React Native App
      VS
      Framework7 logo
      Framework7
      Sencha Touch logo

      Sencha Touch

      58
      52
      27
      58
      52
      + 1
      27
      The leading mobile web app framework based on HTML5 for amazing mobile apps.
      Sencha Touch logo
      Sencha Touch
      VS
      Framework7 logo
      Framework7
      NativeBase logo

      NativeBase

      47
      66
      2
      47
      66
      + 1
      2
      Experience the awesomeness of React Native without the pain
      NativeBase logo
      NativeBase
      VS
      Framework7 logo
      Framework7

      related NativeBase posts

      Obsaa Abdalhalim
      Obsaa Abdalhalim
      CEO, Founder at Kafali PAY inc. · | 1 upvotes · 14.9K views
      AWS Elastic Beanstalk
      AWS Elastic Beanstalk
      npm
      npm
      Yarn
      Yarn
      GitHub
      GitHub
      Zube
      Zube
      Dwolla.js
      Dwolla.js
      PubNub
      PubNub
      PostgreSQL
      PostgreSQL
      PostGraphile
      PostGraphile
      Node.js
      Node.js
      GraphQL
      GraphQL
      Apollo
      Apollo
      redux-saga
      redux-saga
      NativeBase
      NativeBase
      React Native
      React Native

      React Native NativeBase redux-saga Apollo GraphQL Node.js PostGraphile PostgreSQL PubNub . @PLAID Dwolla.js . Zube GitHub Yarn npm AWS Elastic Beanstalk

      See more
      LastPass
      LastPass
      Slack
      Slack
      Bitbucket
      Bitbucket
      fastlane
      fastlane
      Yarn
      Yarn
      Dwolla.js
      Dwolla.js
      Twilio
      Twilio
      NativeBase
      NativeBase
      React Native Firebase
      React Native Firebase
      React Native
      React Native
      React
      React
      Google App Engine
      Google App Engine
      Cloud Functions for Firebase
      Cloud Functions for Firebase
      Cloud Firestore
      Cloud Firestore
      Firebase
      Firebase

      Firebase Cloud Firestore Cloud Functions for Firebase Google App Engine React React Native React Native Firebase NativeBase Twilio Dwolla.js Yarn fastlane Bitbucket Slack LastPass

      See more
      Xamarin Forms logo

      Xamarin Forms

      46
      29
      1
      46
      29
      + 1
      1
      A complete cross-platform UI toolkit for .NET developers
      Xamarin Forms logo
      Xamarin Forms
      VS
      Framework7 logo
      Framework7

      related Xamarin Forms posts

      Greg Neumann
      Greg Neumann
      Indie, Solo, Developer · | 6 upvotes · 71.4K views
      TypeScript
      TypeScript
      Vue.js
      Vue.js
      Electron
      Electron
      Quasar Framework
      Quasar Framework
      ASP.NET
      ASP.NET
      Xamarin Forms
      Xamarin Forms
      .NET Core
      .NET Core
      Xamarin
      Xamarin

      Finding the most effective dev stack for a solo developer. Over the past year, I've been looking at many tech stacks that would be 'best' for me, as a solo, indie, developer to deliver a desktop app (Windows & Mac) plus mobile - iOS mainly. Initially, Xamarin started to stand-out. Using .NET Core as the run-time, Xamarin as the native API provider and Xamarin Forms for the UI seemed to solve all issues. But, the cracks soon started to appear. Xamarin Forms is mobile only; the Windows incarnation is different. There is no Mac UI solution (you have to code it natively in Mac OS Storyboard. I was also worried how Xamarin Forms , if I was to use it, was going to cope, in future, with Apple's new SwiftUI and Google's new Fuchsia.

      This plethora of techs for the UI-layer made me reach for the safer waters of using Web-techs for the UI. Lovely! Consistency everywhere (well, mostly). But that consistency evaporates when platform issues are addressed. There are so many web frameworks!

      But, I made a simple decision. It's just me...I am clever, but there is no army of coders here. And I have big plans for a business app. How could just 1 developer go-on to deploy a decent app to Windows, iPhone, iPad & Mac OS? I remembered earlier days when I've used Microsoft's ASP.NET to scaffold - generate - loads of Code for a web-app that I needed for several charities that I worked with. What 'generators' exist that do a lot of the platform-specific rubbish, allow the necessary customisation of such platform integration and provide a decent UI?

      I've placed my colours to the Quasar Framework mast. Oh dear, that means Electron desktop apps doesn't it? Well, Ive had enough of loads of Developers saying that "the menus won't look native" or "it uses too much RAM" and so on. I've been using non-native UI-wrapped apps for ages - the date picker in Outlook on iOS is way better than the native date-picker and I'd been using it for years without getting hot under the collar about it. Developers do get so hung-up on things that busy Users hardly notice; don't you think?. As to the RAM usage issue; that's a bit true. But Users only really notice when an app uses so much RAM that the machine starts to page-out. Electron contributes towards that horizon but does not cause it. My Users will be business-users after all. Somewhat decent machines.

      Looking forward to all that lovely Vue.js around my TypeScript and all those really, really, b e a u t I f u l UI controls of Quasar Framework . Still not sure that 1 dev can deliver all that... but I'm up for trying...

      See more
      Onsen UI logo

      Onsen UI

      25
      48
      10
      25
      48
      + 1
      10
      HTML5 Hybrid Mobile App UI Framework - work with Angular, React, Vue, Meteor & pure JavaScript. Material &...
      Onsen UI logo
      Onsen UI
      VS
      Framework7 logo
      Framework7
      RIBs logo

      RIBs

      21
      48
      0
      21
      48
      + 1
      0
      Build cross-platform apps that have similar architecture, enabling iOS and Android teams to cross-review business logic code (by...
        Be the first to leave a pro
        RIBs logo
        RIBs
        VS
        Framework7 logo
        Framework7