An Awesome Project
- by Imrul
Agenda
How we build our product?
What tools/technology we use to build it?
Agenda
How we build our product?
- Team Size, Philosophy
- Development Methodology
Agenda
What tools/technology we use to build it?
- Tech Stack
- Deep drive into Mobile App Development
- CI (Continuous Integration)
- CD (Continuous Delivery & Deployment)
What I can't show/discuss?
App or Screenshots of the app
Business behind the App
Team
How we build our product?
Team Members
7
Developers (Full Stack) - 4
UX - 1
Product Owner (PO) - 1
Development Manager - 1
Team Philosophy
you build it you run it"
fully autonomous team
Development Methodology
How we build our product?
Development Methodology
Agile (Scrum) & Lean
Development Methodology
Rituals:
Sprint Planning
Refinements
Sprint Review
Retrospective
OKR
Definition of Done (DoD)
BDD
experiment fast, fail fast"
fail fast, learn fast"
Development Methodology
PO
UX
PBI
Team
DM
Sprint
Development Methodology
PO
UX
Team
DM
Sprint Planning
Refinement
Sprint Review
Retrospective
OKR
Others
Technology Stack
Mobile
React Native
Native Android (Java)
Native iOS (Objective-c)
Back-end/ Microservices
ASP.NET Core(C#)
GO
Testing
Mobile
Jest
Jasmine
Appium
API
xUnit
specflow
Unit, Integration & Acceptance Testing
DevOps, CI & CD
Mobile
Docker
Fastlane
Jenkins
Crashlatics
TestFlight
Slack
API
Docker
Kubernetes
Azure (ACS, ACR, ..)
Cake Script
Jenkins
Mobile Development
Mobile Development
Why React Native?
Mobile Development
React Native is just a VIEW layer!
Need lots of other tools to develop app with complex interactions.
Mobile Development
- react
- react-mixin
- react-native
- react-native-drawer
- react-native-fabric
- react-native-fs
- react-native-google-analytics-bridge
- react-native-i18n
- react-native-modal-dropdown
- react-native-pdf-view
- react-native-root-toast
- react-native-vector-icons
- react-timer-mixin
Dependent Libraries:
- lodash
- moment
- redux
- react-redux
- react-native-pdf-view
- react-native-root-toast
- react-native-vector-icons
- react-redux
- react-timer-mixin
- redux
- redux-persist
- redux-thunk
- url-parse
Mobile Development
- babel-eslint
- babel-jest
- babel-preset-react-native
- eslint
- eslint-plugin-react
- jest
- jest-react-native
Development Dependent Libraries:
Design Mobile UI
The CSS3 Flexible Box, or flexbox
class JustifyContentBasics extends Component {
render() {
return (
// Try setting `justifyContent` to `center`.
// Try setting `flexDirection` to `row`.
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between',
}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
);
}
};
AppRegistry.registerComponent('AwesomeProject', () => JustifyContentBasics);
Design Mobile UI
Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with flexDirection defaulting to column instead of row, and the flex parameter only supporting a single number.
React Native (Advanced)
- Functional Programming
- Unidirectional Dataflow
- ES6/2015
- Component Development
Native Android (java)
Native iOS (objective-c)
CI & CD
Client CI pipeline
API CD pipeline
Thank You!
Q&A
Achievements
-
After joining Exact, learn and create a prototype android app using React Native within one month. And created an MVP within 6 months and went to Controlled Release(CR) by only 3 developers where one joined after me and another couple of months before me. It was a completely new team, and the business and technologies were also new.
-
Supporting iOS platform within a week, it was easy due to React Native. But we used some android specific components previously and needed to switch those.
-
Developing mobile components with complex user interactions using Redux
-
Created template & theme concept in the app which helps us to change the app’s design rapidly. We change to completely new layout within a week
-
Presenting the app to Stakeholder in KL & Delft in bi-weekly Sprint Review using WebEx and answer Q&A
An Awesome Project
By imrul hasan
