Hack The Code

Tech Talk Concept

Hack the code

Conventional Talk

Props

  • Attractive topic name
  • Lots of research work involved
  • Interactive question/answer session

Cons

  • Long time duration
  • Lots of information in one go
  • Need to build the complete background

Hack the Code (Concept)

The idea of this tech talk to have a short and interactive tech talk. This tech talk will revolve around two things.

Hack the Code (Concept)

  • Presenter will show-up any unique implementation done in the project.

Hack the Code (Concept)

  • Or be brave enough to show the hacks you have applied in your project and audience will suggest any better approach to remove that hack from code.

Presenter: Muhammad Tahir Hassan

Designation: Senior Software Engineer

Find Property in Customize Region

HomeSnap Intro

  • Homesnap is a real-state website
  • Homesnap is built for agents and loved by homebuyers
  • Accurate, real-time MLS data and enhanced property features make it easy to search for and share homes with friends, client and colleagues.

HomeSnap Demo

Implementation

Implementation

Rasterization

Saving partial and complete tiles

This problem is solved by saving partial and complete tiles in the system

Presenter: Adeel Akram

Designation: Software Engineering Lead 

Handle Multiple API Calls

Multiple Api Calls

  • When Multiple components on same screen call the same action/service
  • When onScroll loading
  • When someone doubles click on submit button

Solution

const inprogress = {};
myFunction (param) {
  const uniqueKey = param.value;
  if (inprogress[uniqueKey]) {
    return inprogress[uniqueKey];
  }
  inprogress[uniqueKey] = new Promise((resolve, reject) => {
    // implementation
    //InEnd
    delete inprogress[uniqueKey];
  });
  return inprogress[uniqueKey];
}

Presenter: Saad Abbasi

Designation: Software Engineer 

Rethink, Reselect, Redux.

{
  students: [...]
}

{
  marketing: [...],

  engineering: [...],

  design: [...],
}

component

action

normalization

data

store

❌

API Server

Normalization

Selectors

{
  students: [...]
}

component

action

data

store

API Server

{
  students: [...]
}

data

getEngineers()

selectors

getMarketeers()

getDesigners()

hof-connect()

getEngineers()

selectors

getMarketeers()

getDesigners()

hof-connect()

Expensive

isn't it???

Reselect

to the rescue 

const students = store.students;


export const engineerSelector = createSelector(
  students,
  () => students.filter((std) => std.degree === 'engineering');
)

export const designerSelector = createSelector(
  students,
  () => students.filter((std) => std.degree === 'art and design');
)

export const marketingSelector = createSelector(
  students,
  () => students.filter((std) => std.degree === 'marketing');
)
  • Selectors can compute derived data, allowing Redux to store the minimal possible state.
  • Selectors are efficient. A selector is not recomputed unless one of its arguments changes.
  • Selectors are composable. They can be used as input to other selectors.
const students = store.students;


export const getStudentById = (id = '') => {

  return createSelector(
    students,
    (students = []) => students.find((std) => std.id === id);
  );
};

memoization dead 💀

Problem

possibly mem-leak ☢️


class ABC extends React.Component {
  componentWillReceiveProps(prev, next){
  	if (prev.students !== next.students) {
      const studentId = router.params.id;
      this.setState({
        student: this.props.students.find(std => std.id === id);
      });
    }
  }
  
  render(){
	const data = this.state.student;
    return (
	 <StudentBio data={data}/>
    );
  }
}

export default connect(
	(state) => ({students: state.students})
)(ABC);

O(n)

every single time 🙄

Entity Pattern

to the rescue

{
  students: [...]
}

component

not objects

store

{
  students: [
    {101: {...}},

    {102: {...}},

    {103: {...}},

]}

entities

getEngineers()

selectors

getMarketeers()

getDesigners()

hof-connect()

API Server

const students = store.students;


export const engineerSelector = createSelector(
  students,
  (students) => Object.values(students).filter(
  	(std) => std.degree === 'engineering');
)

export const designerSelector = createSelector(
  students,
  (students) => Object.values(students).filter(
  	(std) => std.degree === 'art and design');
)

export const marketingSelector = createSelector(
  students,
  (students) => Object.values(students).filter(
  	(std) => std.degree === 'marketing');
)

Refactoring

as per entities

Cool! No Side Effects


class ABC extends React.Component {
  componentWillReceiveProps(prev, next){
  	if (prev.students !== next.students) {
      const studentId = router.params.id;
      this.setState({
        student: this.props.students[studentId];
      });
    }
  }
  
  render(){
	const data = this.state.student;
    return (
	 <StudentBio data={data}/>
    );
  }
}

export default connect(
	(state) => ({students: state.students})
)(ABC);

O(1)

holy cow 😃😃😃

Mission Accomplished

🎇

any questions?

Presenter: Junaid Ahmed

Designation: Software Engineer 

Re rendering of mounted route

Presenter: Ahsan 

Designation: Software Engineer 

Downloading files in Axios

Thank You

Hack the Code

By Tahir Hassan

Made with Slides.com

Hack the Code

A Short and interactive Tech Talk

  • 269

More from Tahir Hassan