DEV Community: Pravin kumar

VS Code extenstions that I love

Pravin kumar — Wed, 14 Oct 2020 11:30:06 +0000

Wakatime
Bracket Pair Colorizer
Better Comments
GitLens
Path Intellisence
Live Server
Prettier
ESLint
Material Icon Theme 10.Settings Sync

Reducing Flutter App size

Pravin kumar — Sun, 16 Aug 2020 10:30:06 +0000

Whenever we build an app, the app size optimisation is always a difficult part. Even in 4G and modern smartphone era people prefer smaller apps and the smaller apps are more likely to be downloaded. Unlimited internet is no for everybody. **More than 337 million smartphone users with limited data plans. So after all coding part we do optimisation and try to reduce the app size. In the terms of optimisation each and every bytes matters.

The download completion rate of an app with an APK size of around 10MB will be ~30% higher than an app with an APK size of 100MB

Ref: Article

There are many good coding practice and building a stable architecture will help the app to perform better. We can talk about it in detail in another article. Apart from that there are some common methods and practice that you can implement in your app to make it better.

7 Flutter app Performance Tips

1. Image Asset

In Flutter people uses images from assets folder to display in the app. In development mode this will be useful as the images are loaded faster. But when you bundle the app these images adds more weight to the app. The solution is of using network images. Upload the images in permanent storage path like AWS or in your website server and use the link to that image in your code.

Image.network( 'https://picsum.photos/250?image=9',
)

Also compress PNG and JPEG files before uploading to your storage. The free online resource to compress PNG image is https://compresspng.com/.

2. Use Google Fonts

Initially flutter app can have custom font styles only assessing the font file from assets folder. Similar to images these fonts will also increase app size. The best solution is using google_fonts plugin. This plugin will dynamically download font when it is used and it will download it in a specific style and language, so that you don’t need to ship all of the variation with your project.

Text(
  'This is Google Fonts',
  style: GoogleFonts.lato(
    textStyle: Theme.of(context).textTheme.display1,
    fontSize: 48,
    fontWeight: FontWeight.w700,
    fontStyle: FontStyle.italic,
  ),
),

3. Icons

It is recommended to use from Material Icons or Cupertino Icons class. From Flutter 1.17, you can add --tree-shake-icons option to flutter build command, to remove all of the not used icons from the bundle. This will potentially save the size of your app.

But in many situations due to modern desing you might need to use other icons. In that case use .svg format icon so you doesn’t need to worry about different device DPI’s and this also helps in reducing apk size.

4. Dynamic App Delivery

We could build an app bundle if we are uploading to playstore or we could split the apk per abi which splits the apk to x64 and x86 bit code. By using appbundle Google Play’s new app serving model, called Dynamic Delivery, uses your app bundle to generate and serve optimized APKs for each user’s device configuration, so they download only the code and resources they need to run your app.

But some of the store like Amazon App store still doesn't support appbundle in that case you can use --split-per-abi command which will give you three version of apks.

On average, apps published with app bundles are 20% smaller in size.

flutter build appbundle
// or use
flutter build apk --split-per-abi

5. Cache

Using cache will not help in reducing app size but it will make the app to load faster and hence improving the app performance. All frequently used images like profile pic, bg picture using cached_network_image plugin

The cached_network_image package allows you to use any widget as a placeholder. In this example, display a spinner while the image loads.

CachedNetworkImage(
  imageUrl: "http://via.placeholder.com/200x150",
  imageBuilder: (context, imageProvider) => Container(
    decoration: BoxDecoration(
      image: DecorationImage(
          image: imageProvider,
          fit: BoxFit.cover,
          colorFilter:
              ColorFilter.mode(Colors.red, BlendMode.colorBurn)),
    ),
  ),
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
),

6. Proguard

Proguard is a java program optimizer. It is not specific to Flutter. It optimizes your code in ways that don’t change the functionality but change the representation to make it more compact. It obfuscates name of types, fields, methods where the original name doesn’t matter such that long names are replaced with short strings like a and b for efficiency. Packages and classes may have a long name but should not hinder efficiency. It also removes unused java code from dependencies.

You have two default proguard file you can apply.

proguard-android-optimize.txt - progurard configuration
proguard-android.txt

We used proguard-android-optimize.txt as the default proguard configuration. You can add you custom proguard configurations in proguard-rules.pro file in your /app directory.

 release {
    //Enable the proguard
    minifyEnabled true
    proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), "proguard-rules.pro"

    //Other parameters
    debuggable false
    jniDebuggable false
    renderscriptDebuggable false
    signingConfig playStoreConfig //Add your own signing config
    pseudoLocalesEnabled false
    zipAlignEnabled true
}

By setting minifyEnabled to true, the proguard will remove all the unused methods, instructions and slim down the classes.dex file.By enabling the proguard in every module of our project we can we are able to reduce the classes.dex file size almost by 50%.

Learn more about proguard here.

7. Use Specific Libraries

Calling packages not needed or used in our pubspec.yaml file should be avoided. Once done building your app, you should check your pubspec.yaml and remove libraries/packages which is/are not used. Also remove all the unused assets from pubspec.yaml.

Also in certain situations due to unavailability of some features me might used some 3rd party plugins. But in some future update Flutter might have resolved it and had a built-in solution. In those case using default Flutter solution is a good practice than using the 3rd party plugins.

For more blogs on Flutter visit Smazee

Learn what's MongoDB | NoSQL

Pravin kumar — Wed, 17 Oct 2018 14:30:55 +0000

Mongo DB is a (NoSql) Non-relational Database system which has a dynamic schema for unstructured data. It is more scalable, flexible and faster than any Relational Database.

Relational Database had ruled since many decades as they were simple and had a great developer community. MySQL, Oracle, PostgreSQL, and Microsoft SQL Server were commonly used for every application. But as the time passes the upcoming technology needed more reliable and powerful DB.

Then comes our hero NoSQL. In 1998 Carlo Strozzi made a lightweight Strozzi NoSQL open-source relational database that did not expose the standard Structured Query Language (SQL) interface but was still relational. As time passes many NoSQL databases were formed. There are 4 general classifications of NoSQL database.

Column: Accumulo, Cassandra, Druid, HBase, Vertica.
Document: Apache CouchDB, ArangoDB, BaseX, Clusterpoint, Couchbase, Cosmos DB, IBM Domino, MarkLogic, MongoDB, OrientDB, Qizx, RethinkDB
Key-value: Aerospike, Apache Ignite, ArangoDB, Berkeley DB, Couchbase, Dynamo, FairCom c-treeACE, FoundationDB, InfinityDB, MemcacheDB, MUMPS, Oracle NoSQL Database, OrientDB, Redis, Riak, SciDB, SDBM/Flat File dbm, ZooKeeper
Graph: AllegroGraph, ArangoDB, InfiniteGraph, Apache Giraph, MarkLogic, Neo4J, OrientDB, Virtuoso

But MongoDB, Cassandra, Redis, HBase and Couchbase are commonly used NoSql database.

MongoDB is a one of the popular open-source document-oriented database developed by 10gen in 2007, later called the MongoDB Inc.MongoDB is generally used with Node and Express JS (Angular for Front-end) and collectively known as MEAN (MongoDB, Express JS, Angular, Node)

But using NoSql everywhere is inappropriate. First, know where you need to use NoSql and does it suit for your application. Use it when your application has high write load, unstable schema (i.e, when you have no idea about what info your application contains), data is location-based, data is big to handle.

Since MongoDB is highly readable it requires no database administrator required for maintaining it. It can be done by a normal developer.

Scalability - NoSQL databases are horizontally scalable, which means that they can handle more traffic simply by adding more servers to the database.

Flexible Schema - NoSql Document (Table is said to be document ) can have any no. of fields and can be nested any no. of times. Hence we need not to predefine Schema for our database.

Sharding is a method for distributing data across multiple machines. MongoDB uses sharding to support deployments with very large data sets and high throughput operations.

Mongoose is an Object Data Modeling (ODM) library for MongoDB and Node.js. It manages relationships between data, provides schema validation, and is used to translate between objects in code and the representation of those objects in MongoDB.

List of companies using MongoDB : Google Mail, LinkedIn, Ebay, Forbes, Otto and many other companies

Applications of MongoDB includes Profile Management, Real-Time Big Data, Content Management, Catalog, Mobile Applications, Internet of Things, Fraud Detection.

At last, it is not that you must use MongoDB everywhere, Know where to use it, Learn how to use & use it effectively.

Referred form many blogs & docs and written by pravindia, Smazee