In mobile development, developers usually split the project into modules for better management. But how if these modules use the same resources?
Content
1. Why Assets Management
1.1. The reasons to manage project assets
1.2. Results2. How to implement Asset Management
2.1. Download designer’s g-drive assets with rclone
2.2. Convert designer Assets into Developer resources
2.3. Copy converted resources to developer asset module3. Automate the jobs
1. Why Assets Management
1.1. The reasons to manage project assets
Issue 1: Duplication
If the app both include module A and module B, the content of the resource is double.
How can dev Reduce Resource Content Duplication?
Dev can export common using resources to a dependency module like above to avoid duplication.
Issue 2: Adaptive
The designer resources format is not totally fit with developers. So we need to convert the designer’s format to the developer’s resource format. Moreover, we need to sync resources from designer to developer for project development.
We need to convert:
svg -> vector xml
png -> webpWebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.Refer: https://developers.google.com/speed/webp
After converting, we reduce the resources themselves size and the app resources size.
1.2. Results
The App Resources size is quite stable through versions (~11–12MB)
Assets is converted and synced automatically. Developers haven’t to take care of resources much.
2. How to implement Asset Module Management
2.1. Download designer’s g-drive assets with rclone
a. Install
Follow the below link: https://rclone.org/drive/
Take a look on file: ~/.config/rclone/rclone.confb. Download g-drive folder by rclone
rclone copy — drive-shared-with-me remote:[source_folder_name] [des_folder_name]The result should be like this:
designer_assets:
- icon_add.svg
- hdpi/icon_add.png
- xdpi/icon_add.png
- xxdpi/icon_add.png
- xxxdpi/icon_add.png2.2. Convert designer Assets into Developer resources
Converter
- Convert SVG to vector file
- Convert png to webp file
- Copy converted resources to res foldera. Convert SVG to Vector file
By default, the maximum file size that should be converted to Vector is 10kb. — @Ai suggest
To convert SVG to Vector, use: https://github.com/ravibhojwani86/Svg2VectorAndroidNote: Copy all svg file to a folder, then convert only that folder. This is much faster than convert each svg file.
b. Convert Png to Webp file
WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25–34% smaller than comparable JPEG images at equivalent SSIM quality index
To convert png to Webp, use: https://developers.google.com/speed/webp/docs/cwebpNote: After converting, we should compare and take the lighter resources (almost is webp)
2.3. Copy converted resources to developer asset module
3. Automate the jobs
Download G-drive folder
- Upload your ~/.config/rclone/rclone.conf to private server
- Schedule a daily job on Bitrise to download and zip the g-drive folder
// Init rclone
curl https://rclone.org/install.sh | sudo bash
mkdir ~/.config/rclone// Download config
curl -u 'abc:xyz' https://.../rclone.conf -o
~/.config/rclone/rclone.conf// Download folder
rclone copy --drive-shared-with-me remote:$source_folder_name $des_folder_name
Result:
Auto convert and update Assets module
Schedule a daily job on Bitrise
- Clone Asset Module
- Run script to convert g-drive files to Android resources
- Commit and push to Repository
- Tag repository and update version.
Result:
Summary
Asset Module management is useful for huge projects. It helps manage resources effectively. But with a tiny project, set it up might take a lot of time and is unnecessary.
Hope this story is helpful for you.
Authors: @Kha, @Long
Sample:
